首页 文章

React Native Flatlist renderItem

提问于
浏览 次
1

使用React Native，与FlatList组件有一些问题 . 这是我的FlatList

<FlatList
     data={this.state._data}
     renderItem={() => this.renderItem()}
     refreshControl={
       <RefreshControl
        onRefresh={() => this.handleRefresh}
        refreshing={this.state.refreshing}
       />
      }
    />

这是我的renderItem函数：

renderItem({item, index}) {
     return (
      <View style={{marginTop: 10, marginHorizontal: 10, paddingLeft: 
         10}}>
        <ListItem
            roundAvatar
            title={`${item.itemName}`}
            subtitle={`${item.amount}`}
            avatar={require('../../../images/logo.png')}
        />
        <View
            style={{
                paddingBottom: 10,
                paddingTop: 10,
                display: 'flex',
                flexDirection: "row",
                justifyContent: "space-around",
                alignContent: "center"
            }}
         >
            <View style={{ flexDirection: "row", alignContent: 
                 "center", width:"45%"}}>
                <Button
                    block
                    small
                    // disabled={this.state.acceptButtonGray}
                    style=
                      {this.state.acceptButtonGray ? ({
                      backgroundColor: 'gray',
                      width: "100%"
                      }) : ({backgroundColor: "#369ecd",
                         width: "100%"
                      })}
                    onPress={() =>
                      this.setState({
                         modalVisible: true,
                         // acceptOrDeclineModalText: `Accept offer for ${item.amount} ${'\b'} Are you Sure?`,
                         acceptOffer: true,
                          })
                      }
                      >
                    <Text>
                        Accept
                    </Text>
                </Button>
            </View>
        </View>
    </View>
   );
  }

按钮中onPress中的this.setState应该使模态可见，并将acceptOffer设置为true . Modal打开，用户确认他们的报价 . 打开该模态的商品按钮现在应该是灰色的，甚至更好，禁用 .

如上所示传递我的RenderItem函数，我收到了

TypeError: Cannot read property 'item' of undefined.

像这样传递我的RenderItem函数：

renderItem={this.renderItem}

我收到此错误：

_this2.setState is not a function

FlatList组件当然负责我的部分问题，以及我调用this.setState的方式和位置 . 我的帖子中只显示了一个按钮，但有两个按钮，一个用于接受，一个用于拒绝 . 有两个模态会改变什么吗？

FlatList轻松显示我的ListItem组件，直到我尝试在View中包含那些ListItems的按钮中调用this.setState .

Modal关闭按钮获取this.state.acceptOffer，如果为true，则将this.state.acceptButtonGray设置为true，如果此逻辑在其他位置？

有没有其他方法可以打开模态并更改按钮颜色而不使用组件状态？是否想要在TouchableOpacity中使用这些按钮？

我非常感谢任何帮助 .

reactjs react-native react-native-ios react-native-flatlist

4 回答

  • 0

    你应该写一个像这样的renderItem函数

    renderItem = ({item, index}) => {
 // return here
}
    回复于
  • 2

    您必须使用 bind(this,item) 或更改 (item)=> 之类的功能 .

    回复于
  • 4

    一想，你有没有尝试改为 renderItem={this.renderItem.bind(this)} ？

    回复于
  • -1

    1）你可以写函数 -

    renderItem = ({item, index}) => { // return here }

    2）或者如果你想执行你的功能那么 -

    <FlatList
 data={this.state._data}
 renderItem={(item) => this.renderItem.bind(this, item)}
 refreshControl={
   <RefreshControl
    onRefresh={() => this.handleRefresh}
    refreshing={this.state.refreshing}
   />
  }
/>
    回复于

相关问题