如何使用React Navigation在React Native中显示标题标题

Question

我是使用React Native的新手，我在使用React Navigation显示/显示标题标题时遇到问题，我尝试查找但全部失败。

这是我完整的脚本：

Loginscreen.js

class LoginScreen  extends Component {
  static navigationOptions = {
    title: 'Login',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Login Screen</Text>
        <Button title="Login To" onPress={() => this.props.navigation.navigate('Tabs')} />
        <Button title="Go To Register" onPress={() => this.props.navigation.navigate('Register')} />
      </View>
    );
  }
}

RegisterScreen.js

class RegisterScreen  extends Component {
  static navigationOptions = {
    title: 'Register',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Register Screen</Text>
        <Button title="Go to Login" onPress={() => this.props.navigation.navigate('Login')} />
      </View>
    );
  }
}

HomeScreen.js

class HomeScreen  extends Component {
  static navigationOptions = {
    title: 'Home',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button title="Go to Login" onPress={() => this.props.navigation.navigate('Login')} />
      </View>
    );
  }
}

ProfileScreen.js

class ProfileScreen  extends Component {
  static navigationOptions = {
    title: 'Profile',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile Screen</Text>
        <Button title="Go to Login" onPress={() => this.props.navigation.navigate('Login')} />
      </View>
    );
  }
}

App.js

，我得到这样的结果：

请任何人帮助我显示/显示标题标题（红色圆圈），组件LoginScreen和Register中的标题很好，但是丢失了HomeScreen和ProfileScreen组件。请帮助我显示/显示它。

谢谢。

Answer 1

在堆栈导航器中定义headerMode: 'screen',。

即您的rootStack

const rootStack = createStackNavigator(
{ 

},{
    headerMode: 'screen'
})

Answer 2

如果没有，则必须重新加载应用程序，因为navigationOptions是静态的，因此它们仅在应用程序启动时加载一次，并且不会更新。