React Native - 将道具从一个屏幕传递到另一个屏幕（使用标签导航器导航）

Question

我需要将数据从 HomeScreen 传递到 SecondScreen。如果我单击 HomeScreen 上的按钮以导航到 SecondScreen，则有大量示例说明如何执行此操作，但如果我使用 v2 底部选项卡导航器进行导航，则找不到任何显示如何传递到 SecondScreen 的内容从 HomeScreen 到 SecondScreen。我尝试了 screenprops 和其他几种方法，花了大约 8 个小时试图弄清楚，但无法让它工作。知道怎么做吗？拜托，任何提示都会很棒。这是我的代码：

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:

  class HomeScreen extends Component {

  constructor(props){
    super(props);  
  }

 componentDidMount(){

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

  }

//....

SecondScreen.js:

class SecondScreen extends Component {

      constructor(props){
        super(props);  
      }


   render()
   return(     

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

    )


    //....

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

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

render(){

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

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

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

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


HomeStack.path = '';

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

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

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

即使您转到文档中的示例并搜索词 'screenprop'，您也不会在任何一个示例中看到任何关于屏幕道具功能的提及。我看到的所有问题都只解决如何在单击按钮时通过 props 这很容易。我正在尝试做的事情可能吗？我敢肯定，我不是唯一一个在主屏幕中检索数据并需要将其传递到其他屏幕的使用选项卡导航器的人。任何建议 helps。谢谢。

ps。这是我调用主屏幕的登录 class：

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;

Answer 1

我认为您是在 HomeScreen 组件的 componentDidMount 中调用数据库，（我是对的？）并且因为同一层次结构中的另一个组件需要相同的数据，您应该考虑将其包装到一个新组件中并在该父组件中调用您的数据，然后将数据传递给所有需要它的子组件。这就是react way to do things。 HomeScreen 的状态不应该有数据，你的数据应该存在于更高层级的父组件中，并将数据作为 props 传递给子组件。

通过这种方式，当您创建选项卡时，您可以按照 react native 文档的建议传递道具：

import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';

const TabBarComponent = (props) => (<BottomTabBar {...props} />);

const TabScreens = createBottomTabNavigator(
{
  tabBarComponent: props =>
    <TabBarComponent
      {...props}
      style={{ borderTopColor: '#605F60' }}
    />,
 },
);

另一种解决方案可能是通过 Redux 或类似的东西使用全局状态管理。

希望对您有所帮助。

编辑：

class Home extends React.Component{
 constructor(props){
   super(props);
   this.state = {data: null}
 }
 componentDidMount() {
   //get your props from navigation (your facebook credentials)
   //your call to database
   this.setState({data: yourResponseData});
 }
 render(){
   const TabNavigator = createBottomTabNavigator(
     {
       HomeScreen: props =>
         <HomeScreenStack
           {...this.state.data}
         />,
       SecondStack: props =>
         <SecondStack
           {...this.state.data}
         />,
      },
     );
   return(
     <TabNavigator />
   )
 }
}

const App = createAppContainer(Home);

export default App;

Answer 2

使用this.props.navigation.navigate.

在您的 HomeScreen 中，一旦您有了要发送的数据，然后导航到 SecondScreen，如下所示：

this.props.navigation.navigate('Second', { data: yourData })

要在 SecondScreen 导航到使用导航道具时访问它，您可以使用 NavigationEvents along with this.props.navigation.getParam。

/* your imports */
import { NavigationEvents } from 'react-navigation';

export default class SecondScreen extends React.Component {
  /* your methods and properties */
  render() {
    <View>
      <NavigationEvents
        onDidFocus={() => this.setState({ data: this.props.navigation.getParam('data', {}) })}
      />
      { /* your SecondScreen render code */ }
    </View>
  }
}

编辑：例如，对于您的 SignInScreen 实施，要访问道具，请使用：

const username = this.props.navigation.getParam('UserName', '')
const fbid = this.props.navigation.getParam('FBID', 0)
const email = this.props.navigation.getParam('email', '')

Answer 3

我最终使用了 Redux，它只花了我大约 100 次通读并尝试学习它，但一旦我学会了它，它就变得惊人而简单。

Answer 4

这是我使用的基本方法：

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const TestComponent = (props) => {
  return <Text>{`TestComponent: ${props.name}`}</Text>;
};

const Home = () => {
  const Tab = createBottomTabNavigator();

  return (
    <View style={{flex: 1}}>
      <Tab.Navigator>
        <Tab.Screen name="Screen 1">
          {() => <TestComponent name="test 1" />}
        </Tab.Screen>
        <Tab.Screen name="Screen 2">
          {() => <TestComponent name="test 2" />}
        </Tab.Screen>
      </Tab.Navigator>
    </View>
  );
};

请注意，为了将道具传递给 Screen，我使用的是子函数，而不是将值传递给 component。然后，子函数可以 return 在您习惯的语法中使用您想要的组件，该组件具有可用的道具。在这种情况下，道具是简单的 name，但您可以扩展它来处理您的状态。

React Native - 将道具从一个屏幕传递到另一个屏幕（使用标签导航器导航）

React Native - pass props from One screen to another screen (using tab navigator to navigate)

reactjs

react-native

react-native-tabnavigator