通过BottomTabNavigator从根组件传递道具 [英] Passing props from a root component through a BottomTabNavigator

问题描述

我的应用根组件如下所示:

My app root component looks like this:

export default class App extends React.Component {
  render() {
    <RootTabs doThings={this.doThings} />
  }
}

RootTabs 组件由 createBottomTabNavigator<创建/a> 来自反应导航:

The RootTabs component is created by createBottomTabNavigator from react-navigation:

const RootTabs = createBottomTabNavigator({
  Movies: {
    screen: Movies
  },
  Actors: ... // etc
})

我的问题是，我想将数据(如果可能的话作为道具)从根组件(App)传输到 Movies 组件，但是 电影 不会收到 doThings 道具.

My problem is, I would like to transmit data (as a prop if possible) from the root component (App) to the Movies component, but Movies do not receive the doThings prop.

如何通过BottomTabNavigator将道具传递给孩子?

How to transmit props through a BottomTabNavigator to children?

如果这不可能，当子组件由 BottomTabNavigator 分隔时，子组件调用根组件上的方法的最简单方法是什么?

If that's not possible, what would be the most simple way for a children component to call a method on a root component, when they are separated by a BottomTabNavigator?

推荐答案

尝试使用 screenProps

Try using screenProps

screenProps 记录在此页面

screenProps is documented on this page

回答来自这里

最小的例子是

import React, { Component } from 'react'
import { AppRegistry, Button, Text, View } from 'react-native'
import { StackNavigator } from 'react-navigation'

class HomeScreen extends Component {
  render() {
    const { navigation, screenProps } = this.props

    return (
      <View>
        <Text>Welcome, {screenProps.user.name}!</Text>
        <Button onPress={() => navigation.navigate('Profile')} title="Go to Profile" />
      </View>
    )
  }
}

class ProfileScreen extends Component {
  render() {
    const { navigation, screenProps } = this.props

    return (
      <View>
        <Text>My Profile</Text>
        <Text>Name: {screenProps.user.name}</Text>
        <Text>Username: {screenProps.user.username}</Text>
        <Text>Email: {screenProps.user.email}</Text>
        <Button onPress={() => navigation.goBack()} title="Back to Home" />
      </View>
    )
  }
}

const AppNavigator = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
})

class MyApp extends Component {
  render() {
    const screenProps = {
      user: {
        name: 'John Doe',
        username: 'johndoe123',
        email: '[e-mail]',
      },
    }

    return (
      <AppNavigator screenProps={screenProps} />
    )
  }
}

export default MyApp

AppRegistry.registerComponent('MyApp', () => MyApp);

HomeScreen 和 ProfileScreen 是定义为 AppNavigator 屏幕的组件.在上面的示例中，我将用户数据从顶级根组件 MyApp 传递到 HomeScreen 和 ProfileScreen.

HomeScreen and ProfileScreen are components defined as screens for AppNavigator. In the example above, I am passing the user data from the top-level, root component MyApp to both HomeScreen and ProfileScreen.

由于在 MyApp 和屏幕组件之间有一个 AppNavigator，我们需要将用户传递给 AppNavigator 的 screenProps 属性，以便 AppNavigator 将其传递给屏幕.除 screenProps 外的任何其他道具都不会被传递.

Since there is a AppNavigator between MyApp and the screen components, we will need to pass the user to screenProps prop of AppNavigator, so that the AppNavigator will pass it down to the screens. Any other prop except screenProps will not be passed down.

MyApp <-- 此处为用户数据.

MyApp <-- user data here .

• AppNavigator <-- StackNavigator，中间人.必须使用 screenProps 向下传递用户数据.
  • HomeScreen <-- 将从 this.props.screenProps.user 而不是 this.props.user 接收用户数据.
  • ProfileScreen <-- 与 HomeScreen 相同

  这篇关于通过BottomTabNavigator从根组件传递道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！