Reactjs 如何将道具传递给'；屏幕'/react导航中的组件

一般来说，我对编程相当陌生，甚至对JS和React（Native）都比较新，但我已经为此工作了一整天，我仍然没有弄明白，所以我求助于堆栈溢出，希望有人能帮助我

基本上，我想要完成的是将其他

组件设置为
App
组件的子组件，因为我希望它们能够访问我将在
App
的
状态下设置的信息。然而，与此同时，我也在使用
react导航
创建底部导航栏，因此我不知道如何将
App
的
props
传递给这些其他
组件
，例如代表其他
子组件的
ExplorePage
组件

应用程序
从“React”导入React；
从“/app/tabs/ExplorePage”导入ExplorePage；
从“react navigation”导入{CreateBoottomTabNavigator}；
…其他进口
类应用程序扩展了React.Component{
状态={
parentState:“测试”，
}
}
const MainScreenNavigator=createBottomTabNavigator(
{
主页：{screen:ExplorePage}，
搜索：{屏幕：搜索页面}，
收藏夹：{screen:FavoritesPage}，
}
);
导出默认主屏幕导航器您可以使用函数传递道具。试试这个

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;

从“React”导入React；
从“/app/tabs/ExplorePage”导入ExplorePage；
从“react navigation”导入{CreateBoottomTabNavigator}；
…其他进口
类应用程序扩展了React.Component{
状态={
parentState:“测试”，
}
render（）{
//旧的
//const MainScreenNavigator=MainScreenNavigator（this.state.parentState）；
const MainScreenNavigator=MainScreenNavigator（this.state）；
返回(
)
}
}
const mainScreenNavigator=value=>createBottomTabNavigator(
{
//主页：{screen:props=>}，
主页：{screen:props=>}，
搜索：{屏幕：搜索页面}，
收藏夹：{screen:FavoritesPage}，
}
);
导出默认应用程序；

编辑

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

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

如果要传递多个属性，则可以使用es6 spread运算符，如编辑中所示
{…value}
，这将把value的所有属性传递给该组件。
您应该使用API中提到的导航器道具“screenProps”：

屏幕道具-将额外选项传递给子屏幕

在子屏幕上，只需通过
this.props.screenProps
获取道具。对于正在寻找react navigation 5解决方案的用户，可以使用如下初始参数：

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


你好！非常感谢你，它成功了。你能解释一下你做了什么以及为什么它会起作用吗？顺便说一句，我删除了Home周围的{}花括号，以使其正常工作，否则它会出现语法错误。还有一种方法可以从
App
的状态分配
ExplorePage
每个变量，还是唯一可以单独分配的方法？哈哈！我忘了那个花括号了。。在编辑中修复。。请参见编辑中关于我如何传递多个参数的更多信息：，但他们计划摆脱屏幕道具：他们摆脱了
screenProps
。