react navigation標題欄

static navigationOptions = ({ navigation }) => ({
        headerStyle: [{
            borderBottomWidth: 1,
            borderBottomColor: "#eee",
            elevation: 0,
        }, Platform.OS == "android" && {
            paddingTop: StatusBar.currentHeight,
            height: StatusBar.currentHeight + 56,
        }],
        headerTitle: <Text style={{ fontSize: 18, fontWeight: "bold", color: "#333" }}>我的錢包</Text>,
        headerLeft: (
            <TouchableOpacity
                style={{ padding: 13 }}
                onPress={() => navigation.goBack()}
            >
                <Image style={{ width: 9, height: 16 }} source={require("../assets/images/icon-back.png")} />
            </TouchableOpacity>
        ),
        headerRight: (
            <TouchableOpacity
                style={{ padding: 13 }}
                onPress={() => navigation.goBack()}
            >
                <Text style={{ color: "#333", fontSize: 16, fontWeight: "500" }}>明細</Text>
            </TouchableOpacity>
        )
    })

如果個別頁面不想使用這個標題
在創(chuàng)建路由導航的createStackNavigator函數(shù)傳入 navigationOptions: { header: null }
取消全部標題欄則在createStackNavigator函數(shù)的第二個參數(shù)對象中加入 headerMode: 'none'

image.png
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容