如何将属性传递给选项卡导航器内的 react-native 组件？答案

【问题标题】：how to pass properties to a react-native component inside a tab navigator?如何将属性传递给选项卡导航器内的 react-native 组件？
【发布时间】：2018-08-19 09:08:20
【问题描述】：

我有以下代码：

import React, { Component } from 'react';
import {TabNavigator} from 'react-navigation';
import {Button,FlatList,Text,View} from 'react-native';

class Recent extends Component<{}> {

  getData() {
      return ["Locked in room","Fell on the floor", "Need help with Stairs"];
  }
  render() {

    let {navigate} = this.props.navigation;


    console.log(this.props.user); // this line gives me undefined
    return (
        <FlatList
          style={{flex:1,width:"100%"}}
          data={this.getData()}
          keyExtractor={(item, index) => index}
          renderItem={({item}) => <Text onPress={()=>navigate("NextPage",{user:this.props.user})}>{item}</Text>}
        />
    );
  }
}

const RequestRouter = TabNavigator({
  Recent1: {screen: Recent},
  Recent2:{screen:Recent}
  }
);

export default class App extends Component<{}> {

  render() {

    let {navigate} = this.props.navigation;
    const user = this.props.navigation.state.params.user;

    return (
        <View style={{flex:1,flexDirection:"column"}}>
            <Button onPress={()=>navigate("NextPage",{user:user})}
                title="Go"
                accessibilityLabel="Go"
            />
            <View style={{width:"100%",flex:6,flexDirection:"column"}}>
            <RequestRouter user={user} />
            </View>
        </View>
    );
  }
}

我遇到的问题是class Recent extends Component 中的console.log(this.props.user); 给了我一个undefined。这是因为我不知道如何正确地将App.render() 中的user 变量传递给Recent.render()，因为有一个TabNavigator 将请求路由到Recent 类。

如何将user 变量从App.render() 传递到Recent？

【问题讨论】：

标签： javascript react-native tabnavigator

【解决方案1】：

您可以使用screenProps 将道具传递给TabNavigator 内的子组件，如下所示：

<RequestRouter screenProps={user} />

您可以通过this.props.screenProps.user在子组件中访问它

【讨论】：