动态添加视图onPress

Question

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

1. 任何这些联系人的onPress (pickContact函数)，我想动态地向_renderAddFriendTile添加一个新视图(上面的按钮)。
2. 理想情况下，每个联系人名称(在模式中)后面的'Add‘图标应该更新(’删除‘图标)，不管它们是否存在于_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数据模型更新用户界面

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点应该很容易寻址。就在renderRow of ListView内部，呈现不同的图标如果friend.firstname === this.state.contactPicked.firstname

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

边备注

部件{this.state.contactPicked && (<View><Text>Some text</Text></View)}正在使用条件呈现。如果&&是真的话，它就会呈现视图，否则它就不会呈现任何东西(falsy和null值被解释为"nothing“)。

当然，如果您想动态地呈现多个项，状态模型应该是一个数组，即contactsPicked，最初是空的。每次选择联系人时，都会向数组中添加一个新的contact对象。然后，在_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>
    )
}