Question

我需要将数据从主屏幕传递到SecondScreen。如果我单击主屏幕上的一个按钮导航到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种其他方式，这时我什至都不记得了。我不想在第二个屏幕中再次调用我的数据库来获取用户信息。我认识的人都不知道会做出反应还是做出反应。 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”一词，您也不会在任何一个示例中看到任何提及screen prop功能的内容。我所看到的所有问题都仅涉及如何在单击按钮时传递道具，这很容易。我想做的事可能吗？我确定我不是唯一一个使用选项卡导航器的人，该人会在主屏幕中检索数据并将其传递给其他屏幕。任何建议都会有所帮助。谢谢。

ps。这是我的登录类，正在调用主屏幕：

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

使用this.props.navigation.navigate。

在您的HomeScreen中，一旦有了要发送的数据，就可以像这样导航到SecondScreen：

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

要在SecondScreen中使用导航道具进行导航时访问它，可以将NavigationEvents与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 2

这是我使用的基本方法：

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。然后，子功能可以使用惯用的语法返回所需的组件，该组件具有可用的道具。在这种情况下，道具就是简单的name，但是您可以扩展它来处理您的状态。

Answer 3

我最终使用了Redux，它只让我读了100遍，并尝试学习它，但是一旦我学会了它，那就太简单了。

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

3 个答案: