React 네이티브 Flatlist renderItem

Question

React Native로 작업하면서 FlatList 구성 요소에 몇 가지 문제가 있습니다. 눈에 보이는 모달을해야 버튼의 onPress에의

이

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

this.setState, true로 설정 acceptOffer : 이이 내 renderItem 기능 내 FlatList

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

입니다. 모달이 열리고 사용자가 쿠폰을 확인합니다. 해당 모달을 연 제안 버튼은 회색이어야하며 더 좋고 무능력해야합니다.

_this2.setState is not a function 

FlatList 구성 요소 : 나는이 오류가

renderItem={this.renderItem} 

: 내 RenderItem 기능을 전달

는

나는이처럼 내 RenderItem 기능을 전달

TypeError: Cannot read property 'item' of undefined. 

을 받고, 위 그림과 같이 분명히 내 문제의 일부분뿐만 아니라 어떻게 그리고 내가 이것을 부르고 있는지에 대한 책임이있다. 먹었다. 내 게시물에는 단 하나의 버튼 만 표시되지만 두 개는 수락 용이고 하나는 거절 용입니다. 두 모달이 바뀌면 뭐가 달라질까요?

FlatList는 해당 ListItem을 포함하는보기 내의 단추에서 this.setState를 호출 할 때까지 쉽게 ListItem 구성 요소를 표시합니다.

모달 닫기 버튼은 this.state.acceptOffer를 사용하고 true이면 this.state.acceptButtonGray를 true로 설정합니다.이 로직이 다른 곳에 있어야합니까?

모달을 열고 구성 요소 상태를 사용하지 않고 단추 색상을 변경하는 또 다른 방법이 있습니까? TouchableOpacity 내부에서이 버튼이 반응하고 싶습니까?

나는 어떤 도움을 주셔서 감사합니다.

Answer 1

하나는 renderItem={this.renderItem.bind(this)}으로 변경하려고 했습니까?

Answer 2

당신은 내가 당신이 순수한 구성 요소와 FlatList를 사용하는 것이 좋습니다 것이

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