react navigation标题栏
2019-10-10 本文已影响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'