javascript - 无法在 react 导航中将 Prop 从 Stacknavigator 传递到 DrawerNavigator

标签 javascript reactjs react-native navigation react-navigation

目前我有这个屏幕场景:

const Tabs = TabNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: <Image style={{height: 22, width: 22}} source={require('../assets/images/nav-home.png')}/>,
      header: null
    }
  },
  Thanks: {
    screen: Thanks,
    navigationOptions: {
      tabBarLabel: 'Thanks',
      tabBarIcon: <Image style={{height: 22, width: 21}} source={require('../assets/images/nav-thanks.png')}/>,
      header: null
    }
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
    gesturesEnabled: false
    }
  },
},
{
  initialRouteName: 'Home',
  tabBarPosition: 'bottom',

},
)

const Drawer = DrawerNavigator(
  {
    Tabs: {
      screen: Tabs,
      navigationOptions: {
        drawerLabel: () => null
      }
    },
    Search: {screen: SearchAndProfile}
  },
  {
    drawerPosition: 'right',
    initialRouteName: 'Tabs',
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
})

const NotLoggedIn = StackNavigator(
  {
   LoginScreen: {
screen: Login,
     navigationOptions: {
          gesturesEnabled: false,
      }
    },
   Drawer: {screen: Drawer}
  },
  {
   initialRouteName: 'LoginScreen',
   headerMode: 'none',
   navigationOptions: {
    gesturesEnabled: false,
  }
  }
)

const LoggedIn = StackNavigator(
  {
   Drawer: {screen: Drawer}
  },
  {
   headerMode: 'none',
   navigationOptions: {
    gesturesEnabled: false,
  },
  transitionConfig : () => ({
    transitionSpec: {
      duration: 0,
      timing: Animated.timing,
      easing: Easing.step0,
    },
  }),
  }
)

export const Root = StackNavigator(
  {
    Splash:{screen: Splash},
    LoggedIn: {
      screen: LoggedIn,
      navigationOptions: {
        gesturesEnabled: false
      }
    },
    NotLoggedIn: {screen: NotLoggedIn}
  },
  {
    headerMode: 'none',
    navigationOptions: {
    gesturesEnabled: false,
  },
  transitionConfig : () => ({
    transitionSpec: {
      duration: 0,
      timing: Animated.timing,
      easing: Easing.step0,
    },
  }),
  }
)

我正在尝试将参数从启动屏幕传递到登录屏幕,但似乎参数在 TabNavigator(在主屏幕中)中未定义

我是这样传递的

this.props.navigation.navigate('LoggedIn',{testData: 'testing'}) 

componentDidMount() 函数中,当我登录 this.props.navigation.state.params 时,我得到了未定义。可能是什么原因?

最佳答案

你尝试过这个吗? (来自此discussion on github)

this.props.navigation.navigate('LoggedIn', {}, {
    type: "Navigate",
    routeName: "Drawer",
    params: {testData: 'testing'},
})

关于javascript - 无法在 react 导航中将 Prop 从 Stacknavigator 传递到 DrawerNavigator,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51571285/

相关文章:

javascript - React-tag-input 中的样式

javascript - RealmJS - 显示代理对象而不是对象列表

javascript - React w/Redux/React-Redux 和 Redux-Persist 仅将第一个更改持久保存到本地存储

javascript - 具有 HTML5 异步属性和协议(protocol)相关 URL 的 Google Analytics JavaScript 跟踪代码

javascript - Ant Design Dropdown - 访问子菜单中的 props 值 [ React ]

javascript - 如何将列表映射到一定数量的数据

javascript - React Native - 在 Javascript Promise 中显示加载屏幕组件

css - 使用显式高度时 react native 垂直文本对齐

javascript - 什么是json,能给新手解释一下吗?

javascript - ckeditor 将 html 内容显示为纯文本