一般来说,我对编程相当陌生,对JS和React(本机)甚至更新,但我已经为此工作了一整天,但我仍然没有弄明白,所以我求助于堆栈溢出,希望有人能帮助我.

基本上,我想完成的是将其他Components个设置为应用程序组件的子组件,因为我希望他们能够访问我将在应用程序state中设置的信息.然而,同时,我也在使用react-navigation来创建底部导航栏,因此我不知道如何将应用程序中的props传递给其他Components个,比如代表其他children componentsExplorePage组件.

应用程序

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

...other imports

class 应用程序 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>
    )
  }

And obviously every time the console prints that parentState does not exist. I thought that being in the same place would give the other components like ExplorePage props of 应用程序. Thanks for helping me!

推荐答案

你可以使用函数传递props .试试这个

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;

Edit

首先,我把你的MainScreenNavigator改成了一个函数,因为它动态地接受状态值.

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

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

React-native相关问答推荐

添加REACT-Native-SVG时出现错误-失败:构建失败并出现异常

react-native 根据状态隐藏显示按钮

redux-observable 您在预期流的地方提供了 undefined

react-native alignSelf 中心并拉伸到 maxWidth?

用于部署后设置的 React 配置文件

未找到 xcode 'boost/config/user.hpp' 文件

如何在 React Native 中删除警告

React-Native:显示加载屏幕直到加载 webview

如何在 React Native 中使用断点进行调试

textAlignVertical不是有效的样式属性

如何在react native应用程序名称中添加空格?

React Native 中的全屏图像

我们如何将 Firebase Analytics 与基于 expo 的 react-native 应用程序一起使用

如何在 React Native 中获取电话号码?

如何将捕获的图像与 react-native-camera 一起使用

react-native Bottom Up drawer

如何更改键盘上的 return按钮?

react-native如何导入元素根目录?

ReactNative Flatlist - RenderItem not working

如何将 React-Native 元素集成到 Android-Studio?