Question

我是React-Native的入门者，我正在使用stackNavigator包中的react-navigation创建向导。但是我无法在堆栈的不同屏幕之间传递参数：

class TaskWizard extends React.Component {
   constructor(props) {
      super(props)
      let {service} = this.getNavigationParams()
      this.state = {
         model : {service.fields}
      }
   }

   getNavigationParams() {
      return this.props.navigation.state.params || {}
   }
}


const TaskWizardStack = createStackNavigator({
    Wizard : {
      screen : TaskWizard,
    },
})


const PostTaskStack = createStackNavigator({
     // some screens here then Task wizard
     Deep : {
       screen : Deep
     }
     TaskWizard : {
       screen : TaskWizardStack
     }
})
export default PostTaskStack

我知道我可以将参数从Deep组件传递到这样的屏幕：

<View>
   <TouchableOpacity
    onPress={() => this.props.navigation.navigate('TaskWizard', {
                         service: {id : 1, fields : [{}]} },
                      })
    />
</View>

这会将service参数从Deep组件内部传递到TaskWizard堆栈。我需要将其从TaskWizard传递到Wizard之类的每个子屏幕。有可能吗？

Answer 1

尝试使用screenprops将数据传递到其他组件

https://reactnavigation.org/docs/en/stack-navigator.html#navigator-props

Answer 2

下面的代码对我有用

    export const AdminBottomNavigator = createBottomTabNavigator(
    {Home: {screen: SchoolDashboard},
    Students: {screen: StudentList},
    Message: {screen: Dashboard},
    Settings: {screen: StudentList},}, 
    defaultNavigationOptions: ({ navigation }) => 
    ({tabBarIcon: ({ focused, horizontal, tintColor }) => 
    {let screenProps=navigation.getScreenProps();}})})

在嵌套stackNavigator中传递道具

2 个答案: