因 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 即可!
以上便是此次分享的全部内容,希望能对大家有所帮助!