美文网首页
react navigation标题栏

react navigation标题栏

作者: 九歌丶 | 来源:发表于2019-10-10 19:24 被阅读0次
    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>
            )
        })
    

    如果个别页面不想使用这个标题
    在创建路由导航的createStackNavigator函数传入 navigationOptions: { header: null }
    取消全部标题栏则在createStackNavigator函数的第二个参数对象中加入 headerMode: 'none'

    image.png

    相关文章

      网友评论

          本文标题:react navigation标题栏

          本文链接:https://www.haomeiwen.com/subject/avfsyctx.html