Question

我对编程很新，甚至比JS和React（Native）更新，但是我已经在这一天工作了一整天，我仍然没有想到它所以我已经使用了Stack Overflow希望有人可以帮助我。

基本上我想要完成的是将其他Components设置为App组件的子项，因为我希望它们能够访问我将在state中设置的信息App。但是，与此同时，我还使用react-navigation创建了底部导航栏，因此我不知道如何将props App传递给其他Components ExplorePage例如代表另一个children components的{{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',
    }

}

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 {{1}}道具{{1}}。谢谢你的帮助！

Answer 1

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

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

Answer 3

您应该使用API中提到的导航器道具“ screenProps”：

screenProps -将其他选项传递到子屏幕

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

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

3 个答案: