有一个用户列表。当您单击联系人块时,有必要将其展开到内容的高度。到目前为止,我不知道该怎么做。
export default class App extends Component {
constructor(props){
super(props);
this.state = {
isSelected: false,
users: [
{
"name": "Isabel Dorsey",
"email": "isabeldorsey@eschoir.com",
"about": "Laborum nostrud occaecat quis non id pariatur amet. Proident ad exercitation incididunt consectetur velit dolore laborum consectetur deserunt labore. Reprehenderit sit nostrud ad nostrud magna nisi et mollit. Cupidatat tempor nisi amet do ullamco qui Lorem sit enim. Ut reprehenderit occaecat id dolore sint ipsum consectetur qui commodo ut magna Lorem. Dolor laborum ex aliqua sint exercitation nulla dolor voluptate sint occaecat reprehenderit aute nostrud.\r\n"
},
...
],
};
this.changeState = this.changeState.bind(this);
}
changeState(isSelected){
this.setState({ isSelected: !this.state.isSelected });
}
render() {
let { isSelected } = this.state
const { users } = this.state
return (
<View style={styles.container} >
<Text style={styles.h2}>Список контактов</Text>
<FlatList
data={users}
renderItem={({item}) =>
<View style={styles.flatItem}>
<TouchableOpacity
style = {[
styles.itemField,
isSelected ?
styles.resizeFieldPress :
styles.resizeField
]}
onPress = { this.changeState }
>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.email}>{item.email}</Text>
<Text style={styles.about}>{item.about}</Text>
</TouchableOpacity>
</View>
}
keyExtractor={item => item.email}
/>
</View>
);
}
}