反應本地 - 動態添加視圖onPress

Question

我有一個視圖，其中包含一個按鈕 - onPress它打開一個模式顯示聯繫人列表。

1. 的任何那些聯繫人的onPress（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

，因爲你需要動態更新的東西，那就是你需要利用本地的狀態數據建模的明確指示。 （撇開不使用的狀態圖書館管理像終極版）

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

你pickContact功能需要從ListView中朋友的數據，所以你需要選擇的行來調用它：

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

然後你pickContact函數中，新contactsPicked數據模型

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

這將使更新UI喲現在

_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> 
    ) 
} 

通知你：給定的值上this.state.contactPicked存在你可以使用這些方針的東西烏爾組件重新渲染，你可以將一些邏輯裏面_renderAddFriendTile呈現一些額外的UI（瀏覽，文本。）保持所選聯繫人的姓氏，所以第二點應該很容易處理。只要在ListView的renderRow的內部，渲染一個不同的圖標如果friend.firstname === this.state.contactPicked.firstname

注意：不要依賴firstname進行這種檢查，因爲您可以重複檢查，那樣會失敗。最好的解決方案是向列表模型提供每個聯繫人的唯一id屬性，並使用該id屬性檢查上述邏輯。

旁註

的部分{this.state.contactPicked && (<View><Text>Some text</Text></View)}使用條件呈現。 &&充當如果因此如果this.state.contactPicked是真的，它將呈現視圖，否則它將不呈現任何東西（虛假和null值通過反應被解釋爲「沒有呈現」）。

當然，如果要動態渲染多個項目，您的狀態模型應該是一個數組，即contactsPicked，最初爲空。每次選擇聯繫人時，都會向數組中添加一個新的聯繫人對象。然後在_renderAddFriendTile裏面你可以use map來動態渲染多個組件。我想你不需要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> 
    ) 
}