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

Question

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

基本上我想要完成的是将 other 设置Components为App组件的子级，因为我希望他们能够访问我将在stateof 中设置的信息App。然而，与此同时，我也使用react-navigation创造底部导航栏，因此我对我如何能通过不知道props的App这些其他的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

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

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

Answer 2

您可以使用函数传递道具。尝试这个

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 提供的功能。您可以在文档中找到相关信息。反应导航

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