Реагировать на встроенную навигацию Flatlist - PullRequest
Новая
       14

Реагировать на встроенную навигацию Flatlist

0 голосов
/ 14 апреля 2020

Я использовал плоский список для получения данных. Теперь я понятия не имею, как установить onclick для моего flatlist. 

render(){
        const listActivities = this.state.activitiesList
        function Item({ title }) {
            return (
              <View style={styles.item}>
                <Text style={styles.title}>{title}</Text>
              </View>
            );
        }
        return (
            <View>
                <View style={styles.container}>
                    <Text style={styles.heading}>UPCOMING ACTIVITIES</Text>
                </View>
                <View>
                    <SafeAreaView>
                        <FlatList onPress={()=>navigate(DetailsScreen)}
                            data = {listActivities}
                            renderItem={({ item }) => <Item title={item.name} />}
                            keyExtractor={item => item.id}
                        />
                    </SafeAreaView>
                </View>
            </View>
        )
    }

Я пытался использовать onpress, но это не сработало. У кого-нибудь есть идеи по этому поводу? Кстати, я не использовал stackNavigator, но создалDrawerNavigator.

Ответы [ 3 ]

2 голосов
/ 14 апреля 2020

Вы должны добавить onPress к компоненту внутри renderItem, <Item onPress={}></Item>, который установит значение состояния. Затем, когда значение этого состояния изменяется, вы можете вызвать такой эффект, как изменение навигации. 

<FlatList
  ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
    <View style={[style.separator, highlighted && {marginLeft: 0}]} />
  )}
  data={[{title: 'Title Text', key: 'item1'}]}
  renderItem={({item, index, separators}) => (
    <TouchableHighlight
      key={item.key}
      onPress={() => this._onPress(item)}
      onShowUnderlay={separators.highlight}
      onHideUnderlay={separators.unhighlight}>
      <View style={{backgroundColor: 'white'}}>
        <Text>{item.title}</Text>
      </View>
    </TouchableHighlight>
  )}
/>

Взятый прямо из реагирующих документов .

1 голос
/ 14 апреля 2020

Если вы хотите узнать, какой элемент был нажат в Flatlist, вы можете легко использовать один из компонентов TouchableOpacity, TouchableNativeFeedback, TouchableHighlight или TouchableWithoutFeedback, доступных в реагирующем.

В вашем случае вы можете сделать что-то вроде: 

render() {
  const listActivities = this.state.activitiesList;
  function Item({ title }) {
    return (
      <TouchableOpacity
        onPress={() => {
          console.log(title, 'was pressed');
        }}
      >
        <View style={styles.item}>
          <Text style={styles.title}>{title}</Text>
        </View>
      </TouchableOpacity>
    );
  }
  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.heading}>UPCOMING ACTIVITIES</Text>
      </View>
      <View>
        <SafeAreaView>
          <FlatList onPress={() => navigate(DetailsScreen)}
            data={listActivities}
            renderItem={({ item }) => <Item title={item.name} />}
            keyExtractor={item => item.id}
          />
        </SafeAreaView>
      </View>
    </View>
  );
}

Вы можете прочитать больше на Официальные документы RN

В примечании обратите внимание на объявление функций вне вашей функции рендеринга для лучшая производительность в долгосрочной перспективе, чтобы избежать повторного выделения функции / компонентов снова и снова. как: 

renderItem = (name) => {
  return (
    <TouchableOpacity
      onPress={() => {
        console.log(name, 'was pressed');
      }}
    >
      <View style={styles.item}>
        <Text style={styles.title}>{name}</Text>
      </View>
    </TouchableOpacity>
  );
}

render() {
  const listActivities = this.state.activitiesList;
  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.heading}>UPCOMING ACTIVITIES</Text>
      </View>
      <View>
        <SafeAreaView>
          <FlatList onPress={() => navigate(DetailsScreen)}
            data={listActivities}
            renderItem={({ item }) => this.renderItem(item.name)}
            keyExtractor={item => item.id}
          />
        </SafeAreaView>
      </View>
    </View>
  );
}
1 голос
/ 14 апреля 2020

Если вы хотите добавить onPress для всего FlatList, вы можете обернуть его TouchableOpacity 

<TouchableOpacity onPress={()=>navigate(DetailsScreen)}>
<FlatList
         data = {listActivities}
         renderItem={({ item }) => <Item title={item.name} />}
         keyExtractor={item => item.id}
         />
</TouchableOpacity>

, если вы хотите добавить onPress для каждого элемента: 

<View style={styles.item}>
     <Text onPress={()=>navigate(DetailsScreen)} style={styles.title}>{title}</Text>
</View>

или Вы можете обернуть текст с TouchableOpacity

...