时间戳

首页 > 解决方案 > 如何使用 React Navigation 在 React Native 中显示标题标题

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

问题描述

我是使用 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 中丢失了。请帮我展示/显示它。

谢谢。

标签： javascriptreactjsreact-nativereact-navigation

解决方案

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

即你的rootStack

const rootStack = createStackNavigator(
{ 

},{
    headerMode: 'screen'
})

推荐阅读