React native-在Press上动态添加视图

Question

我有一个包含按钮的视图-按下它会打开一个显示联系人列表的模式。

1. on按下这些联系人中的任何一个(pickContact函数)我想动态地将一个新视图添加到_renderAddFriendTile(上面的按钮)。

2. 同样理想的情况是，每个联系人名称旁边的"添加"图标(在模式中)都应该更新("删除"图标)，无论它们是否存在于_renderAddFriendTile视图中。

最好的方法是什么？

[更新代码]

import React, {Component} from 'react'
import {
Text,
View,
ListView,
ScrollView,
StyleSheet,
Image,
TouchableHighlight,
TextInput,
Modal,
} from 'react-native'

const friends = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
}).cloneWithRows([
{
id: 1,
firstname: 'name01',
surname: 'surname01',
image: require('../images/friends/avatar-friend-01.png')
},
{
id: 2,
firstname: 'name02',
surname: 'surname02',
image: require('../images/friends/avatar-friend-02.png')
},
{
id: 3,
firstname: 'name03',
surname: 'surname03',
image: require('../images/friends/avatar-friend-03.png')
},
{
id: 4,
firstname: 'name04',
surname: 'surname04',
image: require('../images/friends/avatar-friend-04.png')
},
])

class AppView extends Component {
state = {
isModalVisible: false,
contactPicked: [],
isFriendAdded: false,
}
setModalVisible = visible => {
this.setState({isModalVisible: visible})
}
pickContact = (friend) => {
if(this.state.contactPicked.indexOf(friend) < 0){
this.setState({
contactPicked: [ ...this.state.contactPicked, friend ],
})
}
if(this.state.contactPicked.indexOf(friend) >= 0){
this.setState({isFriendAdded: true})
}
}
_renderAddFriendTile = () => {
return(
<View style={{flex: 1}}>
<View style={[styles.step, styles.stepAddFriend]}>
<TouchableHighlight style={styles.addFriendButtonContainer} onPress={() => {this.setModalVisible(true)}}>
<View style={styles.addFriendButton}>
<Text style={styles.addFriendButtonText}>Add a friend</Text>
</View>
</TouchableHighlight>
</View>
</View>
)
}
render(){
return (
<ScrollView style={styles.container}>
<Modal
animationType={'fade'}
transparent={true}
visible={this.state.isModalVisible}
>
<View style={styles.addFriendModalContainer}>
<View style={styles.addFriendModal}>
<TouchableHighlight onPress={() => {this.setModalVisible(false)}}>
<View>
<Text style={{textAlign:'right'}}>Close</Text>
</View>
</TouchableHighlight>
<ListView
dataSource={friends}
renderRow={(friend) => {
return (
<TouchableHighlight onPress={() => {this.pickContact()}}>
<View style={[styles.row, styles.friendRow]}>
<Image source={friend.image} style={styles.friendIcon}></Image>
<Text style={styles.name}>{friend.firstname} </Text>
<Text style={styles.name}>{friend.surname}</Text>
<View style={styles.pickContainer}>
<View style={styles.pickWrapper}>
<View style={this.state.isFriendAdded ? [styles.buttonActive,styles.buttonSmall]: [styles.buttonInactive,styles.buttonSmall]}>
<Image source={this.state.isFriendAdded ? require('../images/button-active.png'): require('../images/button-inactive.png')} style={styles.buttonIcon}></Image>
</View>
</View>
</View>
</View>
</TouchableHighlight>
)
}}
/>
</View>
</View>
</Modal>
{this._renderAddFriendTile()}
</ScrollView>
)
}
}
export default AppView

Answer 1

由于您需要动态更新某些内容，这清楚地表明您需要使用本地状态来对数据进行建模。(除此之外，您没有使用像Redux这样的州立图书馆管理)

state = {
isModalVisible: false,
contactPicked: null,
}

您的pickContact函数需要listView中的好友数据，因此您需要使用选定的行来调用它：

<TouchableHighlight onPress={() => {this.pickContact(friend)}}>

然后在pickContact函数中，使用新的contactsPicked数据模型更新UI

pickContact = (friend) => {
this.setState({
contactPicked: friend,
});
}

这将使您的组件重新呈现，并且您可以在_renderAddFriendTile中放置一些逻辑来呈现一些额外的UI(视图、文本..)，前提是this.state.contactPicked上存在值。您可以使用以下内容：

_renderAddFriendTile = () => {
return(
<View style={{flex: 1}}>
{this.state.contactPicked && (
<View>
<Text>{contactPicked.firstName}<Text>
</View>
)}
<View style={[styles.step, styles.stepAddFriend]}>
<TouchableHighlight style={styles.addFriendButtonContainer} onPress={() => {this.setModalVisible(true)}}>
<View style={styles.addFriendButton}>
<Text style={styles.addFriendButtonText}>Add a friend</Text>
</View>
</TouchableHighlight>
</View>
</View>
)
}

请注意，您现在在状态中保留了所选联系人的firstName，因此点编号2应该很容易寻址。就在ListView的renderRow内部，如果friend.firstname === this.state.contactPicked.firstname，则渲染不同的图标

注意：这种检查不要依赖于名字，因为你可能会有重复的名字，否则就会失败。最好的解决方案是为您的列表模型提供每个联系人唯一的id属性，并使用该id属性检查上面的逻辑。

旁注

零件{this.state.contactPicked && (<View><Text>Some text</Text></View)}正在使用条件渲染。如果，&&充当，因此如果this.state.contactPicked是真的，它将渲染视图，否则它将不渲染任何内容(falsy和null值由react解释为"无需渲染")。

当然，如果您想动态地呈现多个项，那么您的状态模型应该是一个数组，即contactsPicked，最初为空。每次拾取联系人时，都会向阵列中添加一个新的联系人对象。然后在_renderAddFriendTile中，可以使用贴图动态渲染多个组件。我认为您不需要ListView，除非您想要一个单独的可滚动列表。

_renderAddFriendTile = () => {
return(
<View style={{flex: 1}}>
{this.state.contactsPicked.length && (
<View>
{this.state.contactsPicked.map(contact => (
<Text>{contact.firstName}</Text>
)}
</View>
)}
<View style={[styles.step, styles.stepAddFriend]}>
<TouchableHighlight style={styles.addFriendButtonContainer} onPress={() => {this.setModalVisible(true)}}>
<View style={styles.addFriendButton}>
<Text style={styles.addFriendButtonText}>Add a friend</Text>
</View>
</TouchableHighlight>
</View>
</View>
)
}