代码之家 › 专栏 › 技术社区 › vmarquet njlaboratory

将根组件中的道具传递给导航器

react-navigation react-native

1

vmarquet njlaboratory · 技术社区 · 7 年前

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

这个 RootTabs 组件由创建 createBottomTabNavigator

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

我的问题是,我想从根组件传输数据(如果可能的话作为道具)( App Movies 组件,但是不接收 doThings 道具。

BottomTabNavigator 给孩子们?

如果这是不可能的,那么子组件调用根组件上的方法的最简单的方法是什么呢 ?

1 回复 | 直到 7 年前

1

3

Victor 7 年前

屏幕道具记录在这里 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传递到主屏幕和ProfileScreen。

MyApp<--此处显示用户数据。

AppNavigator<——StackNavigator,中间人。必须使用屏幕道具来传递用户数据。
- ProfileScreen<--与主屏幕相同