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

Question

我有以下代码：

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 class.

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

Answer 1

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

<RequestRouter screenProps={user} />

您可以通过 this.props.screenProps.user

在子组件中访问它

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

how to pass properties to a react-native component inside a tab navigator?

javascript

tabnavigator

react-native