是否可以将函数的值传递给 react-native 中的组件？

Question

我有一个显示用户的应用程序，我想在我按下用户时显示额外的信息。

class DetailsUsersScreen extends Component  {
constructor(){
super()
this.state = {
users:[]
};
expandDetail = () => {
this.setState(previousState => ({ content: !previousState.content}))}

getUsers = async() => {
const res = await Http.instance.get("random link which retrieves a set of users")
this.setState({users:res, allClients:res})

getUserId = (item) => {
const userInfo = item
return userInfo

}
render() {

const {users} = this.state

return (

<View>
{this.state.content ?
<View style={{shadowOffset: {
width: 0,
height: 3,
},
marginTop: 20,
backgroundColor:'#48555D',
shadowOpacity: 0.7,
shadowRadius: 4.65,
elevation: 3,
paddingTop: 10,
paddingHorizontal: 10,
borderRadius: 5
}}>
<View  style={{flex: 0.8, flexDirection: 'row', flexWrap: 'wrap', margin:10, justifyContent: 'space-between', backgroundColor:'green' }}>
<Text style={styles.titleText}>Today </Text>
<Image source={require('../../assets/download.png')} />
</View>
<View style={{paddingTop:30}}>
<FlatList
data={users}
renderItem={({item}) => (
<TouchableHighlight activeOpacity={0.9} underlayColor="#7a7a7a" onPress={()=>{this.expandDetail(),this.getUserId(item)}}>
<View style={{flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', paddingBottom: 15}}>
<View>
<Text style={styles.nIdentifyText}>{item.metadata.fingerid}</Text>
<Text style={styles.nameText}>{item.name}</Text>
<Text style={styles.emailText}>{item.email}</Text>
</View>
<View>
<Text style={styles.typeText}>{item.type}</Text>
<Text style={styles.emailText}>{item.fecha}</Text>
<Text style={styles.dateText}>{item.datetime}</Text>
</View>
</View>
</TouchableHighlight>
)

}
/> 

</View>

</View>:<UserDetailExpanded>
</UserDetailExpanded>}
)
}
}

这段代码显示了我从URL获得的用户。注意，我还使用了一个方法，当我按下一个用户时，我隐藏了整个flatlist，这就是"{this.state行。内容?……"出现的原因。在代码末尾的组件<UserDetailExpanded/>是我想要显示的组件，一旦我隐藏了整个平面列表，其中显示了关于我刚刚单击的用户的附加信息。其内容目前为:

import React, { Component } from "react";
import { View, Text, Button } from "react-native"
class UserDetailExpanded extends Component {
render() {
return (
<View>
<Text>Hello World</Text>
</View>
)
}
}
export default UserDetailExpanded;

我的逻辑是这样的:一旦我从Flatlist中按下一个用户，我执行一个叫做expandDetail()的函数，它隐藏了整个Flatlist。一旦它隐藏起来，我还执行一个函数绑定，当我按下检索用户数据的用户时，这是getUserId()，我想将该数据传递给最后名为<UserDetailExpanded/>的组件，并在组件内显示信息。有办法吗?谢谢。

Answer 1

最好这样做像这样react-navigation导航库用户可以按回到列表,但假设你想做这一切在一个屏幕上。

作为一个功能组件通常也会更简单，但让我们保持它是一个类。

首先添加一个名为selectedUser: null的状态变量

渲染成了

render (){
const { users, selectedUser } = this.state
if(!selectedUserId) return <UserDetailExpanded user={selectedUser} />
return (
// this is where your current flatlist goes
)

}

那么你的flatlist中的onPress应该像这样

onPress={() => this.setState({ ...state, selectedUser: item )}

然后在你的UserDetailExpanded组件中你可以访问user中的所有内容你可以通过添加一些日志来看到这个所以把它改成

class UserDetailExpanded extends Component {
console.log(this.props.user)
render() {
return (
<View>
<Text>Hello World</Text>
</View>
)
}
}

最后，如果你想要能够返回到UserDetailExplained组件，你可以在DetailsUsersScreen中创建一个函数，看起来像这样

goBackToList () {这一点。设置状态({…state, selectedUser: null)}}

那么在构造函数中必须添加

this.goBackToList = this.goBackToList.bind(this);

则可以更新

<UserDetailExpanded user={selectedUser} />

<UserDetailExpanded user={selectedUser} goBack={goBackToList} />

然后在你的UserDetailExpanded中你可以添加一个onPress按钮它看起来像这样

onPress={this.props.goBack}