React native 通过BottomTabNavigator从根组件传递道具

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

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

我的问题是，我想从根组件（

App

）向

Movies

组件传输数据（如果可能，作为道具），但

Movies

不接收

doThings

道具

如何通过

BottomTabNavigator

将道具传送给儿童？

如果不可能，那么当子组件被

底部选项卡导航器隔开时，子组件调用根组件上的方法的最简单方法是什么？尝试使用屏幕支撑

屏幕道具记录在这个页面上

答复引自

最起码的例子是

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);

import React，{Component}来自“React”
从“react native”导入{AppRegistry，Button，Text，View}
从“反应导航”导入{StackNavigator}
类主屏幕扩展组件{
render（）{
const{navigation，screenProps}=this.props
返回(
欢迎，{screenProps.user.name}！
navigation.navigate（'Profile'）}title=“转到概要文件”/>
)
}
}
类ProfileScreen扩展组件{
render（）{
const{navigation，screenProps}=this.props
返回(
我的个人资料
名称：{screenProps.user.Name}
用户名：{screenProps.user.Username}
电子邮件：{screenProps.user.Email}
navigation.goBack（）}title=“返回主页”/>
)
}
}
const AppNavigator=StackNavigator({
主屏幕：{屏幕：主屏幕}，
配置文件：{screen:ProfileScreen}，
})
类MyApp扩展组件{
render（）{
常量屏幕道具={
用户：{
姓名：“约翰·多伊”，
用户名：“johndoe123”，
电邮:'john@doe.com',
},
}
返回(
)
}
}
导出默认MyApp
AppRegistry.registerComponent（'MyApp'，（）=>MyApp）；

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

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

MyApp谢谢，
screenProps
。但为什么它只记录在
createStackNavigator
上，而不记录在
createBottomTabNavigator
上？有这么糟糕的文档真是太疯狂了。@vmarquet是的，从官方文档中很难找到屏幕道具。。这是另一部分。。他们不能单独记录事情
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);