React Native - 将道具从一个屏幕传递到另一个屏幕(使用标签导航器进行导航) [英] React Native - pass props from One screen to another screen (using tab navigator to navigate)

问题描述

我需要将数据从我的 HomeScreen 传递到我的 SecondScreen.如果我单击 HomeScreen 上的按钮导航到 SecondScreen，有很多示例说明如何执行此操作，但是如果我使用 v2 底部选项卡导航器，则找不到任何显示如何传递到 SecondScreen 的示例从主屏幕到第二屏幕.我尝试过 screenprops 和其他几种方法，并花了大约 8 个小时试图弄清楚，但无法使其正常工作.知道如何做到这一点吗?请，任何提示都会很棒.这是我的代码:

I need to pass data from my HomeScreen to my SecondScreen. There are a ton of examples of how to do this if i'm clicking a button on the HomeScreen to navigate to SecondScreen, but can't find anything showing how to pass to SecondScreen if I'm using a v2 bottom tab navigator to go from HomeScreen to SecondScreen. I've tried screenprops and a couple other methods and spent about 8 hours trying to figure it out but could not get it to work. Any idea how to do this? Please, any hint would be amazing. Here is my code:

MainTabNavigator.js:

MainTabNavigator.js:

 const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
});


const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,

  },
  config

);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <MaterialIcons name="home" size={32}  />
  ),
};

HomeStack.path = '';


const SecondStack= createStackNavigator(
  {
    Second: SecondScreen,
  },
  config
);    

SecondStack.navigationOptions = {
  tabBarLabel: 'Second screen stuff',

  tabBarIcon: ({ focused }) => (
    <MaterialIcons name="SecondScreenIcon" size={32}  />
  ),
};

SecondStack.path = '';


const tabNavigator = createBottomTabNavigator({
  HomeStack,
  SecondScreen
});

tabNavigator.path = '';

export default tabNavigator;

HomeScreen.js:

HomeScreen.js:

  class HomeScreen extends Component {

  constructor(props){
    super(props);  
  }

 componentDidMount(){

   this.setState({DataFromHomeScreen: 'my data that Im trying to send to SecondScreen'})

  }

//....

SecondScreen.js:

SecondScreen.js:

class SecondScreen extends Component {

      constructor(props){
        super(props);  
      }


   render()
   return(     

         <View>{this.props.DataFromHomeScreen}</View>

    )


    //....

****请在下面找到我尝试过的东西:****

****Please find THINGS I'VE TRIED below:****

HomeScreen.js:当我这样做时，它首先接收它，然后传递空

HomeScreen.js: when i do this it receives it at first but then passes null

render(){

return(
<View>
 //all of my home screen jsx
<SecondScreen screenProps={{DataFromHomeScreen : 'data im trying to pass'}}/>
</View>
)
}

MaintTabNavigator.js:当我这样做时，它首先接收它，然后传递空

MaintTabNavigator.js: when i do this it receives it at first but then passes null

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <MaterialIcons name="home" size={32}  />
  ),
};

<HomeStack screenProps={{DataFromHomeScreen:'data im trying to pass'}}/>


HomeStack.path = '';

我也尝试过其他 5 种方法，但现在我什至不记得了.我不想在第二个屏幕中再次调用我的数据库来获取用户信息.我认识的人都不知道反应或反应原生.https://reactnavigation.org/docs/en/stack-navigator 上的 React Native 文档.html 充其量是最小的，只显示以下内容:

I've tried like 5 other ways too that I can't even remember at this point. I don't want to have to call my database again in the second screen to get user info. Nobody I know knows react or react native. The React Native documentation at https://reactnavigation.org/docs/en/stack-navigator.html is minimal at best, only showing the below:

const SomeStack = createStackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

即使您转到文档中的示例并搜索screenprop"一词，您也不会在任何一个示例中看到任何提及 screen prop 功能的内容.我见过的所有问题都只涉及如何在按钮点击时传递道具，这很容易.我正在尝试做的可能吗?我确信我不是唯一一个使用标签导航器在主屏幕中检索数据并需要将其传递到其他屏幕的人.任何建议都有帮助.谢谢.

even if you go to the examples in the documentation and search for the word 'screenprop' you will not see any mention of the screen prop feature in either of the examples. All questions that I've seen only address how to pass props on button click which is easy. Is what I'm trying to do possible? I'm sure I'm not the only person using tab navigator who's retrieved data in the homescreen and need to pass it to other screens . Any advice helps. thanks.

ps.这是我正在调用主屏幕的登录类:

ps. Here is my Sign in class that is calling the Home screen:

class SignInScreen extends React.Component {
static navigationOptions = {
  title: 'Please sign in',
};


render() {
  return (


    <View
    style={styles.container}
    contentContainerStyle={styles.contentContainer}>

    <View>
    <SocialIcon
    title='Continue With Facebook'
    button
    type='facebook'
    iconSize="36"
    onPress={this._signInAsync} 
    />
    </View>

  );
}


_signInAsync = async () => {

    let redirectUrl = AuthSession.getRedirectUrl();
    let result = await AuthSession.startAsync({
      authUrl:
        `https://www.facebook.com/v2.8/dialog/oauth?response_type=token` +
        `&client_id=${FB_APP_ID}` +
        `&redirect_uri=${encodeURIComponent(redirectUrl)}`,
    });      

    var token = result.params.access_token
    await AsyncStorage.setItem('userToken', token);

    await fetch(`https://graph.facebook.com/me?fields=email,name&access_token=${token}`).then((response) => response.json()).then((json) => {

          this.props.navigation.navigate('Home',
          {
              UserName : json.name,
              FBID : json.id,
              email : json.email

          });     


    }) .catch(() => {
       console.log('ERROR GETTING DATA FROM FACEBOOK')
      });

};
 }

export default SignInScreen;

推荐答案

我最终使用了 Redux，我只花了大约 100 次通读和尝试来学习它，但是一旦我学会了它，它就变得既神奇又简单.

I ended up using Redux, it only took me like 100 read throughs and attempts to learn it, but once I learned it it's amazing and simple.

这篇关于React Native - 将道具从一个屏幕传递到另一个屏幕(使用标签导航器进行导航)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！