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>
        )
    })

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

image.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容