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 即可！

---

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