#react-native
Вопрос:
У меня есть приложение, которое отображает пользователей, и я хочу показывать дополнительную информацию всякий раз, когда нажимаю на пользователя.
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-адресу. Обратите внимание, что я также использую метод, при котором я скрываю весь плоский список, как только нажимаю на пользователя, вот где появляется строка «{this.state.content?…». Компонент <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; Моя логика такова: как только я нажимаю на пользователя из плоского списка, я выполняю вызываемую функцию expandDetail() , которая скрывает весь плоский список. Как только он скрывается, я также выполняю функцию, связанную с нажатием кнопки пользователя, которая извлекает данные пользователя, которые есть getUserId() , и я хочу передать эти данные компоненту с именем в конце <UserDetailExpanded/> и показать информацию внутри компонента. Есть ли способ? Спасибо.
Ответ №1:
Было бы лучше сделать это с помощью библиотеки навигации, такой как react-навигация, таким образом, пользователи смогут нажимать назад, чтобы вернуться к списку, но допустим, вы хотите сделать все это на одном экране.
Это также в целом было бы проще как функциональный компонент, но давайте оставим его классом.
начните с добавления переменной состояния selectedUser: null
визуализация становится
render (){
const { users, selectedUser } = this.state
if(!selectedUserId) return <UserDetailExpanded user={selectedUser} />
return (
// this is where your current flatlist goes
)
}
тогда ваш onPress в вашем плоском списке должен выглядеть так
onPress={() => this.setState({ ...state, selectedUser: item )}
затем в вашем компоненте UserDetailExpanded вы можете получить доступ ко всему, что есть в пользователе, вы можете увидеть это, добавив несколько журналов, поэтому измените его на этот
class UserDetailExpanded extends Component {
console.log(this.props.user)
render() {
return (
<View>
<Text>Hello World</Text>
</View>
)
}
}
наконец, если вы хотите иметь возможность вернуться к компоненту UserDetailExplained, вы можете создать функцию внутри экрана DetailsUsersScreen, которая выглядит следующим образом
goBackToList() { this.setState({ …состояние, выбранный пользователь: null )} }
затем в конструкторе вы должны добавить
this.goBackToList = this.goBackToList.bind(this);
затем вы можете обновить
<UserDetailExpanded user={selectedUser} />
Для
<UserDetailExpanded user={selectedUser} goBack={goBackToList} />
а затем внутри вашего UserDetailExpanded вы можете добавить кнопку с надписью onPress, которая выглядит следующим образом
onPress={this.props.goBack}