How to show header title in React Native using React Navigation

Question

I am newbie using React Native, I have a problem to show/display header title using React Navigation, I try to look for but fail all.

This is my complete script:

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

and I get Result like this :

Please anyone help me to show/display header title (circle red), header title in component LoginScreen and Register are fine, but in component HomeScreen and ProfileScreen are lost. Please help me to show/display it.

Thanks.

Answer 1

Define headerMode: 'screen', inside your stacknavigator.

ie your rootStack

const rootStack = createStackNavigator(
{ 

},{
    headerMode: 'screen'
})

Answer 2

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