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

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