React Native - passez les accessoires d'un écran à un autre écran (en utilisant le navigateur d'onglets pour naviguer)

J'ai besoin de transmettre les données de mon HomeScreen à mon SecondScreen. Il existe une tonne d'exemples de la façon de le faire si je clique sur un bouton de l'écran d'accueil pour accéder à SecondScreen, mais je ne trouve rien indiquant comment passer à SecondScreen si j'utilise un navigateur d'onglet inférieur v2 pour aller de HomeScreen à SecondScreen. J'ai essayé des screenprops et quelques autres méthodes et j'ai passé environ 8 heures à essayer de le comprendre, mais je n'ai pas pu le faire fonctionner. Une idée comment faire cela? S'il vous plaît, tout indice serait incroyable. Voici mon code:

MainTabNavigator.js:

  );
}


_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;

HomeScreen.js:

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>

SecondScreen.js:

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

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

**** Veuillez trouver les CHOSES QUE J'AI ESSAYÉES ci-dessous: ****

HomeScreen.js: quand je fais cela, il le reçoit dans un premier temps mais passe ensuite null

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

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


HomeStack.path = '';

MaintTabNavigator.js: quand je fais cela, il le reçoit dans un premier temps mais passe ensuite null

render(){

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

J'ai essayé cinq autres méthodes dont je ne me souviens même pas à ce stade. Je ne veux pas avoir à appeler à nouveau ma base de données dans le deuxième écran pour obtenir des informations sur l'utilisateur. Personne que je connais ne sait réagir ou réagir natif. La documentation React Native sur https://reactnavigation.org/docs/en/stack-navigator .html est au mieux minimal, ne montrant que ce qui suit:

class SecondScreen extends Component {

      constructor(props){
        super(props);  
      }


   render()
   return(     

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

    )


    //....

même si vous consultez les exemples de la documentation et recherchez le mot «screenprop» vous ne verra aucune mention de la fonctionnalité d'accessoire d'écran dans aucun des exemples. Toutes les questions que j'ai vues ne concernent que la façon de passer des accessoires en cliquant sur un bouton, ce qui est facile. Est-ce que ce que j'essaie de faire est possible? Je suis sûr que je ne suis pas la seule personne à utiliser le navigateur d'onglets à avoir récupéré des données dans l'écran d'accueil et à les transmettre à d'autres écrans. Tout conseil aide. merci.

ps. Voici ma classe de connexion qui appelle l'écran d'accueil:

  class HomeScreen extends Component {

  constructor(props){
    super(props);  
  }

 componentDidMount(){

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

  }

//....

 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;