Question

我使用了清单列表来检索数据。现在，我不知道如何为我的单位列表设置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

您应将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>
  )}
/>

直接从react docs中取出。

Answer 2

如果要在整个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 3

如果您想知道在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>
  );
}

您可以在Official RN docs

上阅读更多内容

在侧面，请考虑在渲染函数之外声明函数，以便长期获得更好的性能，从而避免一次又一次地声明函数/组件。喜欢：

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导航

3 个答案: