Question

我已经将初始组件包装在App中：

export default class App extends React.Component {
  render() {
    return (
      <>
        <AppProvider>
          <Navigator></Navigator>
        </AppProvider>
      </>
    );
  }
}

navigator是包含stackNavigator的组件，该组件可在屏幕上浏览所有应用程序，现在的问题是，当我激活暗模式时，并不是所有的浏览器标题都会被填充，因为我在每个屏幕上都使用了自定义标题：

这是stackNavigator的代码：

    const Home_stack = createStackNavigator({ //hooks
    Home: {
        screen: Home, 
        navigationOptions: ({navigation}) => {
            return {
            headerTitle: () => <Header navigation = {navigation} title = "Note"/>}
        }
    },
    Create: {
        screen: Create, 
        navigationOptions: ({navigation}) => {
            return {
            headerTitle: () => <Childs_header navigation = {navigation} title = "Create Note"/>}
        }
    },
    Edit: {
        screen: Edit, 
        navigationOptions: ({navigation}) => {
            return {
            headerTitle: () => <Childs_header navigation = {navigation} title = "Edit Note"/>}
        }
    },
});

在标题导航中，是我应用样式的地方：

<AppContext.Consumer>
   {({styles: {backgroundColor, color, fontColor}}) => (
      <View style = {{backgroundColor: backgroundColor, flexDirection: "row", alignItems: "center"}}>
      <MaterialIcons onPress = {this.open_drawer} name = "menu" size = {RFValue(24, Math.round(Dimensions.get("window").height))} color = {color}/>
         <View><Text style = {this.styles.title(fontColor)}>{this.props.title}</Text></View>
      </View>
    )}
  </AppContext.Consumer>

给我这个结果：

多数民众赞成在仅自定义标头，但不是stackNavigator的标头，要做到这一点，我需要这样做：

 const Home_stack = createStackNavigator({ //hooks
    Home: {
        screen: Home, 
        navigationOptions: ({navigation}) => {
            return {
            headerTitle: () => <Header navigation = {navigation} title = "Note"/>,
            headerStyle: {backgroundColor: "same color has header"}
        }
    }

将headerStyle添加到navigationOptions中，但这是静态的，所以我想知道如何访问上下文或将标题的颜色传递给它，这是给我的：

这就是我想要的，但是我需要自己设置，我该怎么办？

如何从stackNavigator中的上下文访问值？

0 个答案: