Щелчок элемента FlatList не рендерит это - PullRequest
Новая
       8

Щелчок элемента FlatList не рендерит это

0 голосов
/ 28 февраля 2020 
export default class HistoryScreen extends BaseScreen {

    constructor(props){
        super(props);   
        this.state = {
            mainListData:[],
            listData:[],
            searchText:'',
        };
    }

    listRowPressed(item) {  
        this.props.navigation.navigate('Details', {
            checkin: item.data
          });
    }

    render() {
        return (
            <View style={styles.container}>

                <View style={{ flex:1, backgroundColor: '#FFF'}}>

                    <FlatList
                        data={this.state.listData}
                        renderItem={({item}) => <ListComp data={item} />}
                        keyExtractor={(item, index) => index.toString()}
                    />
                  </View>
            </View>
        );
      } 
}

const ListComp = item => (

    <TouchableOpacity onPress={() => this.listRowPressed(item)
    }>
        <View style={styles.row}>                                       
        </View>
    </TouchableOpacity>
);

Я отображаю данные в FlatList, однако, щелкнув по пункту, я получаю это4. listRowPressed не определен, я пытался связать функцию тоже, но не работал. Что не так в коде?

Ответы [ 2 ]

1 голос
/ 28 февраля 2020

Вы должны передать listRowPressed в свой ListComp компонент. Весь ваш код должен выглядеть следующим образом: 

export default class HistoryScreen extends BaseScreen {
  constructor(props) {
    super(props);
    this.state = {
      mainListData: [],
      listData: [],
      searchText: '',
    };
  }

  listRowPressed = (item) => {
    this.props.navigation.navigate('Details', {
      checkin: item.data
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{ flex: 1, backgroundColor: '#FFF' }}>
          <FlatList
            data={this.state.listData}
            renderItem={({ item }) => <ListComp data={item} listRowPressed={this.listRowPressed} />}
            keyExtractor={(item, index) => index.toString()}
          />
        </View>
      </View>
    );
  }
}

const ListComp = (props) => (
  <TouchableOpacity 
    onPress={() => props.listRowPressed(props.item)}
  >
    <View style={styles.row}>
      {/* Do whatever with props.item here */}
    </View>
  </TouchableOpacity>
);

Также обратите внимание, что я преобразовал ваш метод listRowPressed простая функция в функцию стрелки.

0 голосов
/ 28 февраля 2020

Попробуйте это 

 <FlatList
       data={this.state.listData}
       renderItem={this.listComp}
       keyExtractor={(item, index) => index.toString()}
  /> 


listComp = ({item}) => (

    return(
         <TouchableOpacity onPress={() => this.listRowPressed(item)} >
           <View style={styles.row}> 

           </View>
         </TouchableOpacity>
         );
);
...