通过 BottomTabNavigator 从根组件传递道具

Question

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

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

RootTabs 组件是由 react-navigation 中的createBottomTabNavigator 创建的：

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

我的问题是，我想从根组件 (App) 向 Movies 组件传输数据（如果可能，作为道具），但 Movies 没有收到 doThings 道具。

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

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

Answer 1

尝试使用 screenProps

screenProps 记录在此page

回复自here

最小的例子是

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: 'john@doe.com',
      },
    }

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

export default MyApp

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

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

由于 MyApp 和屏幕组件之间存在 AppNavigator，我们需要将用户传递给 AppNavigator 的 screenProps 属性，以便 AppNavigator 将其传递给屏幕。除了 screenProps 之外的任何其他 prop 都不会被传递。

MyApp

• AppNavigator
• HomeScreen
• ProfileScreen