Question

我开始学习React Native，我知道如何创建TabNavigator或DrawerNavigator，但是我需要访问没有TabNavigation的登录页面上的props.navigation，应该如何获取它。

我尝试过：

const App = createStackNavigator({
    LandingScreen: { screen: LandingScreen },
    Register: { screen: RegisterScreen },
    Login: { screen: LoginScreen}});

但是this.props仍然是空对象。

什么是普通语言的stackNavigator，它是否只是定义导航以便能够使用导航？

Answer 1

在您的LandingScreen中，您可以获取this.props.navigation。您可以将TabNavigation显示为初始路线。您甚至可以为每个选项卡设置堆栈导航。对于React Navigation（v2）文档https://reactnavigation.org/docs/en/tab-based-navigation.html

堆栈导航：为您的应用提供一种在屏幕之间切换的方法，其中每个新屏幕都位于堆栈的顶部。

//Stack Navigator
const App = createStackNavigator({
    Home: { screen: Tabs }, //You can nest your TabNavigator here, Hence the LandingScreen inside your HomeStack will shown as your Initial screen
    Register: { screen: RegisterScreen },
    Login: { screen: LoginScreen}}); 

//Sample Tab Navigator
const Tabs = createBottomTabNavigator(
  {
    Home: HomeStack,
    Settings: SettingsStack,
  },
  {
    /* Other configuration remains unchanged */
  }
);

const HomeStack = createStackNavigator({
  LandingScreen: LandingScreen,
  Details: DetailsScreen,
});

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
  Details: DetailsScreen,
});

您可以通过以下方法获取导航道具

//LandingScreen Component
export default LandingScreen extends Component{
  static navigationOptions = ({navigation}) => ({  //you can able to destructure your navigation prop here
    headerTitle: 'Langing Page'
  })

  render(){
    return(
      //your logic here
    )
  }
}

应对导航混乱

1 个答案: