如何在反应导航中将道具传递给“屏幕"/组件 [英] How to pass props to 'screens'/components in react-navigation

问题描述

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

I'm fairly new to programming in general and even newer to JS and React(Native) but I have worked on this for an entire day now and I still haven't figured it out so I have resorted to Stack Overflow in hopes that someone can help me.

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

Basically what I want to accomplish is to set other Components as children of the App component because I want them to be able to access information that I will set in the state of App. However, at the same time, I am also using react-navigation to create bottom navigation bars and thus I have no idea on how I can pass props of App to these other Components such as the ExplorePage component which is representative of the other 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

ExplorePage, which is just like SearchPage and 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 提供 App 的 ExplorePage 道具.谢谢你帮助我！

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 App. Thanks for helping me!

推荐答案

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

You could pass a props using function. Try this

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 更改为一个函数，因为它动态地接受状态值.

First thing, I changed your MainScreenNavigator to be a function, as it is accepting state values dynamically.

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

Second thing, Instead of directly assigning { screen : Component }, I used function. This is the feature provided by reactnavigation. You can find about this in the documentation. ReactNavigation

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

If you want to pass multiple attributes then you can use es6 spread operator, as shown in the edit. {...value}, this will pass all the property of value to that component.

这篇关于如何在反应导航中将道具传递给“屏幕"/组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！