如何从另一个屏幕获取数据到没有任何 class 的主屏幕并且必须在 HeaderRight 部分中设置以响应本机

Question

请在下面找到堆栈导航的代码，在这个页面中只有堆栈和抽屉导航，当我单击 "Header Right" 中的 "Pickup Location" 时，它将打开另一个页面（SubProductPage）在那里它将显示所有地址，按下该页面中的任何地址，我必须在另一页中的 "Pickup location" 位置显示该地址详细信息。

怎么做

const HomeNavigation = createStackNavigator({
  HomeHomePageDrawer:HomePage,
  DeliveryDetails:{
    screen:DeliveryAddressPage,
    navigationOptions:{
      header:null
    }
  },
  SubProductPage:{
    screen:SubProductPage,
    navigationOptions:{
      header:null
    }
  }
},
{
  defaultNavigationOptions:({navigation})=>{
    return{
      headerStyle:{
        backgroundColor:'rgb(28, 34, 36)'
      },
      headerTintColor:'#fff',
      headerTitleStyle:{
        fontWeight:'bold',
        textAlign:'center',
        flex:1
      },
      headerLeft:(
        <View>
          <Icons name="md-menu" style={{fontSize:35,color:'white',paddingLeft:10}} onPress={()=>navigation.openDrawer()} />
        </View>
      ),
      headerRight:(
        <View style={{flex:1,flexDirection:'row'}} >
          <View style={{marginRight:40}}>
            <Text style={{fontSize:10,marginLeft:10,fontWeight:'200',color:'white'}}>Pickup Location</Text>
            <View>
              <TouchableOpacity style={{flexDirection:'row'}} onPress={() =>navigation.navigate('DeliveryDetails')}>
                <Text style={{fontSize:18,marginLeft:10,fontWeight:'900',color:'white',overflow:'hidden',width:230}} numberOfLines={1}>Pickup Location</Text>
                <SimpleLineIcons name="pencil" style={{fontSize:17,color:'white',paddingLeft:10}} />
              </TouchableOpacity>
            </View>
          </View>
          <MaterialIcons name="logout" style={{fontSize:30,color:'white',paddingRight:5}} onPress={() =>navigation.navigate('Auth')} /> 
        </View>
      )
    }
  }
})

点击屏幕下方的铅笔图标后会出现

点击地址后，它应该出现在取货地点

Answer 1

您可以在 react-navigation 中使用导航参数传递参数。

this.props.navigation.navigate('RouteName', { /* params go here */ })

您可以从下方找到更多相关信息 link

https://reactnavigation.org/docs/en/params.html

如何从另一个屏幕获取数据到没有任何 class 的主屏幕并且必须在 HeaderRight 部分中设置以响应本机

How to get data from another screen to home screen which doesn't have any class and have to set in HeaderRight part in react native

react-native

react-navigation

react-navigation-stack