反应本机 Flatlist onclick 导航

Question

我使用平面列表检索数据。现在我不知道如何为我的 flatlist 设置 onclick。

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，而是使用了 createDrawerNavigator。

Answer 1

如果你想在整个 FlatList 上添加 onPress，你可以用 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

包裹文本

Answer 2

您应该在inside renderItem <Item onPress={}></Item>组件中添加一个onPress，这将设置一个状态值。然后，当这个状态值发生变化时，你可以引起导航变化等效果。

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

直接从react docs.

中取出

Answer 3

如果您想知道在 Flatlist 中按下了哪个项目，您可以轻松地使用 TouchableOpacity、TouchableNativeFeedback、TouchableHighlight 或 TouchableWithoutFeedback 组件之一在 react-native 中可用。

在你的情况下，你可以这样做：

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

您可以在 Official RN docs

上阅读更多内容

旁注考虑在渲染函数之外声明函数以获得更好的性能运行避免一次又一次地重新声明 function/Components。喜欢：

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

反应本机 Flatlist onclick 导航

React native Flatlist onclick navigation

javascript

react-native

react-native-flatlist