如何 hide/show 平面列表中的文本输入反应原生？

Question

我是 React Native 的新手，我需要在每个评论回复中显示和隐藏文本输入 option.How 以使每个部分都独一无二，这样我就可以隐藏和显示每个按钮点击的文本输入。

这是我的公寓清单：

<FlatList
  data={item.comments}
  keyExtractor={this._keyExtractor}
  renderItem={this.renderRowItem}
  extraData={this.state}
/>

这是渲染行项目：

renderRowItem = (itemData) => {
    Moment.locale('en');
    return (
      <View style={styles.commentSection}>
        <View style={{flexDirection:'row'}}>
          <View style={{flex:1,flexDirection:'row'}}>
            <Image style={{ height: 30,width: 30,borderRadius: 15, marginTop:8}}
            source={{ uri: this.state.profile_image }} resizeMode='cover' />
            <View style={{width:width,paddingHorizontal:10,paddingRight:10,borderBottomColor:'#D2D0D1',borderBottomWidth:1,paddingBottom:10}}>
              <View style={{flexDirection:'row',paddingTop:5}}>
                <Text style={{fontWeight:'600',fontSize:14}}>
                {itemData.item.firstName} {itemData.item.surname}</Text>
                <Text style={{color:'grey',fontWeight:'500',fontSize:12,paddingHorizontal:20}}>
                {Moment(itemData.item.dateCreated).format('d MMM YYYY')}</Text>
              </View>
              <Text style={{fontWeight:'500',color:'grey',marginTop:5}}>
              {itemData.item.comment}</Text>
              <Text onPress={this.ShowHideTextComponentView} style={{width:width*0.8,color:"#F766FF",textAlign:'right',alignSelf:'stretch',fontSize:12,fontWeight:'600'}}>
              Reply</Text>

              <View>
                <FlatList
                  data={itemData.item.replies}
                  keyExtractor={this._keyExtractor}
                  renderItem={this.renderRowReply}
                />
              </View>
              <View>
              {
                this.state.replyboxShow ?
                <View style={{flex:1,flexDirection:'row',width:width*0.6,marginLeft:10}}>
                  <TextInput
                    style = {[styles.inputReplyBox,
                    !this.state.postValidate ? styles.error : null]}
                    placeholder="Enter message here"
                    placeholderTextColor="grey"
                    onChangeText = {reply => this.setState({reply})}
                  />
                  <TouchableOpacity style={{position: 'absolute',right:6,top:5,alignSelf:'stretch'}}
                  onPress={() => this.replyCom(itemData.item._id)}>
                    <Icon name="paper-plane-o" size={20} color="#F766FF" />
                  </TouchableOpacity>
                </View>
                : null
              }

              </View>

            </View>
          </View>
        </View>
      </View>

    )
  }

在渲染项目的末尾，我使用了回复按钮，点击时我想显示和隐藏每个文本输入字段：

这是我需要实现的设计。

我的 ShowHideTextComponentView 函数：

ShowHideTextComponentView = () =>{
    if(this.state.replyboxShow == true){
      this.setState({replyboxShow: false})
    }else{
      this.setState({replyboxShow: true})
    }
  }

Answer 1

在你的replyboxShow 状态下，所有项目都会显示或隐藏，我创建一个 replyboxShowId 状态来保存元素的 item_id 你想展示。

renderRowItem = (itemData) => {
    Moment.locale('en');
    return (
      <View style={styles.commentSection}>
        <View style={{flexDirection:'row'}}>
          <View style={{flex:1,flexDirection:'row'}}>
            <Image style={{ height: 30,width: 30,borderRadius: 15, marginTop:8}}
            source={{ uri: this.state.profile_image }} resizeMode='cover' />
            <View style={{width:width,paddingHorizontal:10,paddingRight:10,borderBottomColor:'#D2D0D1',borderBottomWidth:1,paddingBottom:10}}>
              <View style={{flexDirection:'row',paddingTop:5}}>
                <Text style={{fontWeight:'600',fontSize:14}}>
                {itemData.item.firstName} {itemData.item.surname}</Text>
                <Text style={{color:'grey',fontWeight:'500',fontSize:12,paddingHorizontal:20}}>
                {Moment(itemData.item.dateCreated).format('d MMM YYYY')}</Text>
              </View>
              <Text style={{fontWeight:'500',color:'grey',marginTop:5}}>
              {itemData.item.comment}</Text>
              <Text onPress={this.ShowHideTextComponentView.bind(this,itemData.item._id)} style={{width:width*0.8,color:"#F766FF",textAlign:'right',alignSelf:'stretch',fontSize:12,fontWeight:'600'}}>
              Reply</Text>

              <View>
                <FlatList
                  data={itemData.item.replies}
                  keyExtractor={this._keyExtractor}
                  renderItem={this.renderRowReply}
                />
              </View>
              <View>
              {
                this.state.replyBoxShowId === itemData.item._id ?
                <View style={{flex:1,flexDirection:'row',width:width*0.6,marginLeft:10}}>
                  <TextInput
                    style = {[styles.inputReplyBox,
                    !this.state.postValidate ? styles.error : null]}
                    placeholder="Enter message here"
                    placeholderTextColor="grey"
                    onChangeText = {reply => this.setState({reply})}
                  />
                  <TouchableOpacity style={{position: 'absolute',right:6,top:5,alignSelf:'stretch'}}
                  onPress={() => this.replyCom(itemData.item._id)}>
                    <Icon name="paper-plane-o" size={20} color="#F766FF" />
                  </TouchableOpacity>
                </View>
                : null
              }

              </View>

            </View>
          </View>
        </View>
      </View>

    )
  }

显示隐藏文本组件视图：

ShowHideTextComponentView = (id) =>{
   this.setState({
      replyBoxShowId : id
   })
}

如何 hide/show 平面列表中的文本输入反应原生？

how to hide/show text input in flat list react native?

react-native

react-native-flatlist