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

Question

我在网上找到了一些代码，而且我对 react-native 还很陌生。我想知道是否可以添加代码以使这些渲染的正方形像按钮一样可点击？（请参阅下面的代码或链接，因为它已经为它创建了一个小吃版本）我试图摆弄按钮或在其中添加 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',
  },
});

标签： react-nativereact-navigationreact-native-flatlist

Answer 1

是的，有可能，您只需将 View 更改为 TouchableOpacity 并添加您的 onPress 功能，如下所示：

这是修改后的小吃