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

Question

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

这是我的完整脚本:

登录屏幕.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>
    );
  }
}

应用程序.js

我得到这样的结果:

请任何人帮助我显示/显示标题标题(红色圆圈)，组件 LoginScreen 和 Register 中的标题标题没问题，但组件 HomeScreen 和 ProfileScreen 丢失了。请帮我显示/显示它。

谢谢。

Answer 1

在您的 stacknavigator 中定义 headerMode: 'screen',。

即你的根堆栈

const rootStack = createStackNavigator(
{ 

},{
    headerMode: 'screen'
})