Передача реквизита от корневого компонента через BottomTabNavigator

Question

Мой корневой компонент приложения выглядит следующим образом:

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

Компонент RootTabs создается createBottomTabNavigator из реагирования:

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

Моя проблема в том, что я хотел бы передать данные (в качестве подпорки, если это возможно) из корневого компонента (App) в компонент Movies, но Movies не получает doThings проп.

Как передать реквизит через BottomTabNavigator детям?

Если это невозможно, каков будет самый простой способ для дочернего компонента вызвать метод корневого компонента, когда они разделены BottomTabNavigator?

Answer 1

Попробуйте использовать screenProps

screenProps задокументировано на этой странице

Отвечено от здесь

Минимальный пример будет

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, нам нужно будет передать пользователю команду screenProps в AppNavigator, чтобы AppNavigator передавал его на экраны. Любая другая опора, кроме screenProps, не будет передана.

MyApp <- данные пользователя здесь. </p>

• AppNavigator
  • HomeScreen <- будет получать пользовательские данные из this.props.screenProps.user вместо this.props.user. </li>
  • ProfileScreen <- такой же, как HomeScreen </li>