ReactNative 之 TouchableHighlight 组件简易使用 - RN
因 ReactNative 的 Button 组件对 iOS 和 Android 的样式存在差异,所以改变套路尝试使用 TouchableHighlight 手势响应控件来替代按钮的思路,具体 code 如下:
export function CallAdminEvent() { // 按钮点击事件 - 右导航栏 const { signIn } = useContext(AuthContext); return ( <TouchableHighlight onPress={CallAdminEventMethod}> <View style={[styles.navBtnStyle, { marginRight : 30 }]}> <Image style={{ width : 30, height : 20 }} source={require('../assets/img/callAdminPic.png')}/> <Text style={{ fontSize : 18, color : '#ffffff' }}>呼叫管理员</Text> </View> </TouchableHighlight> ); } const CallAdminEventMethod = () => { // 点击事件 console.log('[点击事件] - 按钮被点击啦'); }; const styles = StyleSheet.create({ // 样式相关 navBtnStyle : { width : 90, height : 30, flexDirection : 'row', alignItems : 'center', marginTop : 10, }, });
实现如上相关方法一个简易的按钮便 ok 啦,其具体按钮样式可以根据实际设计图自行 diy 即可!
以上便是此次分享的全部内容,希望能对大家有所帮助!
漫思