React Native - 如何将 react-native-navigation 添加到此布局中

Question

我在网上找到了一些代码，我对 react-native 还很陌生。我想知道是否可以添加代码使这些呈现的方块像按钮一样可点击？（请参阅下面的代码或 link，因为它已经为它创建了一个小吃版本）我试图 fiddle 使用按钮或在其中添加 onPress ，遗憾的是我的尝试都没有成功。我希望能够使用 onPress={() => this.props.navigation.navigate('Details')} 之类的东西，但是当它添加到标签中以及当我尝试在附近添加标签时，点击什么都不做它在屏幕上完全覆盖它的标签。

// https://snack.expo.io/@spencercarli/react-native-flatlist-grid
import React from 'react';
import { Button, StyleSheet, Text, View, FlatList, Dimensions } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
//import { Container, Header, Content} from "native-base";
//import { SectionList, FlatList, GridView, FlatGrid } from 'react-native-super-grid';<

const data = [
  { key: 'A' }, { key: 'B' }, { key: 'C' }, { key: 'D' }, { key: 'E' }, { key: 'F' }, { key: 'G' }, { key: 'H' }, { key: 'I' }, { key: 'J' },
  // { key: 'K' },
  // { key: 'L' },
];

const formatData = (data, numColumns) => {
  const numberOfFullRows = Math.floor(data.length / numColumns);

  let numberOfElementsLastRow = data.length - (numberOfFullRows * numColumns);
  while (numberOfElementsLastRow !== numColumns && numberOfElementsLastRow !== 0) {
    data.push({ key: `blank-${numberOfElementsLastRow}`, empty: true });
    numberOfElementsLastRow++;
  }

  return data;
};

const numColumns = 3;
export default class App extends React.Component {
  renderItem = ({ item, index }) => {
    if (item.empty === true) {
      return <View style={[styles.item, styles.itemInvisible]} />;
    }
    return (
      <View
        style={styles.item}
      >
        <Text style={styles.itemText}>{item.key}</Text>
      </View>
    );
  };

  render() {
    return (
      <FlatList
        data={formatData(data, numColumns)}
        style={styles.container}
        renderItem={this.renderItem}
        numColumns={numColumns}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginVertical: 20,
  },
  item: {
    backgroundColor: '#4D243D',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    margin: 1,
    height: Dimensions.get('window').width / numColumns, // approximate a square
  },
  itemInvisible: {
    backgroundColor: 'transparent',
  },
  itemText: {
    color: '#fff',
  },
});

Answer 1

可以，您只需将视图更改为 TouchableOpacity 并添加您的 onPress 功能，如下所示：

here is the snack modified

React Native - 如何将 react-native-navigation 添加到此布局中

React Native - How to add react-native-navigation into this layout

react-native

react-navigation

react-native-flatlist