Question

我在反应原生中使用flatList。我想只隐藏列表中的特定项目。当我隐藏按钮时，每个按钮都隐藏在列表中。

当我按下出价时按钮。如果成功，则隐藏所有按钮。我想隐藏特定项目立即出价按钮。

/////////////// main.js

   constructor (props){
    super(props);
    this.state = {
      access_token: null,
      user : null,
      biddata: [],
      totalBid : null,
      page: 0,
      showbidmodel: false,
      bidValue: '',
      biditem : '',
      hideButton: false
    }
}

   placeBid = (e) => {

     if (this.state.bidValue.length < 2) {
       Toast.show({
         text: ' please enter a valid bid!',
         position: 'top',
         buttonText: 'Okay'
       })
     }

     else {

       var url = `...............`;

       const { params } = this.props.navigation.state;
       console.log("all paramssssssssf ---> ", params.token);

       console.log("check state-------------->>>>",this.state)

       var data = {
         price: this.state.bidValue,
         material_type: this.state.biditem.material_type,
         truck_type: this.state.biditem.truck_type,
         material_name: this.state.biditem.material_name,
         num_of_trucks: this.state.biditem.num_of_trucks,
         truck_name: this.state.biditem.truck_name,
         _id: this.state.biditem._id,
         weight: this.state.biditem.weight,
         extra_notes: this.state.biditem.extra_notes,
         order_no: this.state.biditem.order_no,
         staff: 'no',
         created_by: this.state.biditem.created_by
       };

       console.log("post body ----------------->>>>>", JSON.stringify(data))


       fetch(url, {
         method: "POST",
         body: JSON.stringify(data),
         headers: {
           "Content-Type": "application/json",
           Accept: "application / json",
           Authorization: "Bearer " + params.token
         }
       }).then(res => res.json())
         .catch(error => {
           console.log("bid error :", error)
         })
         .then(response => {
           console.log("all BID SUCCESs response---> ", response);

           const SUCCESS = 'Quotation Saved'

           if (response.status === SUCCESS) {

             Toast.show({
               text: ' SUCCESS !!!! BID is placed . ',
               position: 'top',
               buttonText: 'Okay'
             })

             this.setState({ showbidmodel: false , hideButton: true })

           }

           else

             return;

         });
     }

   }


    renderItem = ({ item }) => {
      return (
        <ListItem
          id={item.index}
          selected={() => { alert(item + "selected")}}
          onPressItem ={ this.onPressItem }
          onPressDetails ={ this.onPressDetails }
          title={item.index}
          hideButton = {this.state.hideButton}
          items = { item }
        />
      );
    }
 return (
             <View style = {styles.container}>
                  <View style={styles.innerContainer} >
                    <Header title="Home" navigation={this.props.navigation} />

                <Modal
                  animationType="slide"
                  transparent={false}
                  visible={this.state.showbidmodel}
                  onRequestClose={() => {
                    this.setState({ showbidmodel: false });
                  }}>

                  <KeyboardAvoidingView style={styles.modalStyle}>

                    <View style={styles.modalInnerStyle }>

                    <Text style={{ color: "white", fontWeight: "bold", textAlign: "center", fontSize: 20 }}>
                     Place your bid Here.

                    </Text>

                    <InputLocal

                      placeholder=" your bid " 
                      onChange={(e) => { this.setState({ bidValue: e });  } }
                      value={this.state.bidValue}
                    />

                    <TouchableOpacity
                      style={styles.login}
                        onPress={ this.placeBid }
                    >
                      <Text style={{ color: "white", fontWeight: 'bold' }}> Submit </Text>
                    </TouchableOpacity>

                    </View>

                  </KeyboardAvoidingView>

                </Modal>





                    {typeof this.state.biddata !== "undefined" && this.state.biddata.length > 0 ?

                    <FlatList

                      data={this.state.biddata}
                      keyExtractor={this.keyExtractor}
                      extraData={this.state}
                      renderItem={this.renderItem}
                      onEndReached = { this.loadMoreTripData }
                      onEndReachedThreshold = {1}

                    /> : <ActivityIndicator 
                    style = {styles.loading}
                    size="large" color="#0000ff" 
                    /> }


                    </View>
              </View>
              );

//////////////// listItem.js

    onPressDetail = () => {
    this.props.onPressDetails( this.props.items._id.$oid  );

};

onPressBid = () => {
    this.props.onPressItem(this.props.items._id.$oid);

};


  <View style={{ flex: 1, flexDirection: 'row',}} >
                    <MyIcon name="airport-shuttle" />
                    <Text style={styles.textStyle}>Truck Type:  {this.props.items.truck_type}</Text>
                </View>


                { !this.props.hideButton ? (

                    <View style={styles.buttonView}>

                        <View style={styles.flex} >
                            <TouchableOpacity
                                style={styles.detail}
                                onPress={this.onPressDetail}
                            >
                                <Text style={{ color: "white", fontWeight: 'bold', textAlign: "center" }}> Details </Text>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.flex} >
                            <TouchableOpacity
                                style={styles.bid}
                                onPress={this.onPressBid}
                            >
                                <Text style={{ color: "white", fontWeight: 'bold', textAlign: "center", backgroundColor: '#ED4C67' }}> Bid Now </Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                ) : null }

            </View>

Answer 1

您可以存储要隐藏按钮的项目的索引。为此，您必须将index传递到renderItem()并从那里传递到ListItem

renderItem={({ item, index }) => this. renderItem(item, index)}

或

您可以在每个项目中包含变量，表示显示或隐藏按钮

如何在反应原生平面列表中隐藏确切项目并隐藏某些内容？

1 个答案: