gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 20:41:26 24 4
gpt4 key购买 nike

我有以下代码:

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

最佳答案

您可以使用 screenProps像这样将 Prop 传递给 TabNavigator 中的子组件:

<RequestRouter screenProps={user} />

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

关于javascript - 如何将属性传递给选项卡导航器内的 react-native 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49216724/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com