Question

我的应用根组件如下：

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

createBottomTabNavigator通过反应导航创建了RootTabs组件：

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之外的任何其他道具都不会向下传递。

MyApp <-这里的用户数据。

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

将道具从根组件传递到BottomTabNavigator

1 个答案: