如何在反应导航中将道具传递给“屏幕”/组件

Question

我对一般编程相当陌生，甚至对 JS 和 React(Native) 都比较陌生，但我已经为此工作了一整天，但我仍然没有弄清楚，所以我求助于 Stack Overflow希望有人可以帮助我。

基本上我想要完成的是将其他Components 设置为App 组件的子级，因为我希望他们能够访问我将在App 的state 中设置的信息。但是，与此同时，我还使用react-navigation 创建底部导航栏，因此我不知道如何将App 的props 传递给其他Components，例如ExplorePage 组件这是另一个children components的代表。

应用

import React from 'react';
import ExplorePage from './app/tabs/ExplorePage';
import {createBottomTabNavigator} from 'react-navigation';

...other imports

class App extends React.Component {

  state = {
      parentState: 'testing testing',
    }

}

const MainScreenNavigator = createBottomTabNavigator(
  {
    Home: {screen: ExplorePage},
    Search: {screen: SearchPage},
    Favorites: {screen: FavoritesPage},
  }
);


export default MainScreenNavigator;

ExplorePage，类似于 SearchPage 和 FavoritesPage

...imports

export default class ExplorePage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    }
  }
  
  componentDidMount() {
    console.log(this.props.parentState ? this.props.parentState : "Parent state does not exist what do :(");
  }
  
  render(){
    return(
    <Text>Testing</Text>
    )
  }

显然每次控制台打印parentState 不存在。我认为在同一个地方会给其他components 像ExplorePage App 的道具。谢谢你帮助我！

Answer 1

你可以使用函数传递一个道具。试试这个

import React from 'react';
import ExplorePage from './app/tabs/ExplorePage';
import {createBottomTabNavigator} from 'react-navigation';

...other imports

class App extends React.Component {

  state = {
      parentState: 'testing testing',
    }

  render() {

     // old
     // const MainScreenNavigator = mainScreenNavigator(this.state.parentState);
     const MainScreenNavigator = mainScreenNavigator(this.state);

     return (
         <MainScreenNavigator />
     )


  }

}

const mainScreenNavigator = value => createBottomTabNavigator(
  {
    // Home: { screen : props => <ExplorePage {...props} parentState={value} /> },
    Home: { screen : props => <ExplorePage {...props} {...value} /> },
    Search: {screen: SearchPage},
    Favorites: {screen: FavoritesPage},
  }
);


export default App;

编辑

首先，我将您的 MainScreenNavigator 更改为一个函数，因为它动态地接受状态值。

第二件事，我没有直接分配{ screen : Component }，而是使用函数。这是 reactnavigation 提供的功能。您可以在文档中找到相关信息。 ReactNavigation

如果你想传递多个属性那么你可以使用 es6 扩展运算符，如编辑所示。 {...value}，这会将 value 的所有属性传递给该组件。

Answer 2

您应该使用 API 中提到的 Navigator Props “screenProps”：

screenProps - 将额外的选项传递给子屏幕

在子屏幕上，只需通过this.props.screenProps获取道具

Answer 3

对于那些正在寻找 React Navigation 5 解决方案的人，您可以像这样使用initialParams：

<Stack.Navigator>
  <Stack.Screen
    name="screenName"
    component={screenComponent}
    initialParams={{key: value}}
  />
</Stack.Navigator>