代码之家  ›  专栏  ›  技术社区  ›  Md Nahid Hasan

如何在react原生平面列表中精确定位项目并隐藏某些内容?

  •  1
  • Md Nahid Hasan  · 技术社区  · 7 年前

    我在react native中使用flatList。我只想从列表中隐藏特定的项。当前当我隐藏按钮时,列表中的每个按钮都是隐藏的。

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

    ///////////////主要。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>
    
    1 回复  |  直到 7 年前
        1
  •  0
  •   Ravi    7 年前

    您可以存储要隐藏按钮的项目的索引。因此你必须通过 index 在您的 renderItem() 从那里到你的 ListItem

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

    您可以在每个项目中设置变量,以指示显示或隐藏按钮