ReactNative 之 TouchableHighlight 组件简易使用 - RN

本文主要是介绍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 即可！

---

以上便是此次分享的全部内容，希望能对大家有所帮助！

这篇关于ReactNative 之 TouchableHighlight 组件简易使用 - RN的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---