时间戳

首页 > 解决方案 > 如何将大量数字放入数组中而不是在平面列表中使用它们？

react-native - 如何将大量数字放入数组中而不是在平面列表中使用它们？

问题描述

我得到了一堆buttnos，我需要在本机反应中制作一个水平平面列表，我总是遇到一些错误，所以有人可以帮我怎么做吗？我需要将这些按钮放在一个数组中，这样我就可以将它们放在我需要制作的平面列表中，但我被困在这里：D 我是 reactnative 新手，所以如果有人可以帮助我，谢谢<3

<View style={{flexDirection: 'row', paddingHorizontal: 10, paddingTop: 5}}>
                <View style={{width: '15%', paddingRight: 5}}>
                      <TouchableOpacity
                      style={[styles.buttonText]}
                      activeOpacity = {.5}
                      onPress={ ()=>this.setState({...this.state, location: 'details'}) }>
                          <Text style={styles.buttonText}>Details</Text>
                      </TouchableOpacity>
                  </View>
                  <View style={{width: '15%', paddingRight: 5}}>
                      <TouchableOpacity
                      style={[styles.buttonText]}
                      activeOpacity = {.5}
                      onPress={ ()=>this.setState({...this.state, location: 'users'}) }>
                          <Text style={styles.buttonText}>Users</Text>
                      </TouchableOpacity>
                  </View>
                  <View style={{width: '15%', paddingRight: 5}}>
                      <TouchableOpacity
                      style={[styles.buttonText]}
                      activeOpacity = {.5}
                      onPress={ ()=>this.setState({...this.state, location: 'assets'}) }>
                          <Text style={styles.buttonText}>Assets</Text>
                      </TouchableOpacity>
                  </View>
                  <View style={{width: '15%', paddingRight: 5}}>
                      <TouchableOpacity
                      style={[styles.buttonText]}
                      activeOpacity = {.5}
                      onPress={ ()=>this.setState({...this.state, location: 'sites'}) }>
                          <Text style={styles.buttonText}>Sites</Text>
                      </TouchableOpacity>
                  </View>
                  <View style={{width: '15%', paddingRight: 5}}>
                      <TouchableOpacity
                      style={[styles.buttonText]}
                      activeOpacity = {.5}
                      onPress={ ()=>this.setState({...this.state, location: 'cards'}) }>
                          <Text style={styles.buttonText}>Cards</Text>
                      </TouchableOpacity>
                  </View>
                </View>

标签： react-native

解决方案

确切的代码示例可在首次加载时直接在flatlist 文档页面上获得。

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

您只需要horizontal在 Flatlist 组件中添加道具以使其水平。

推荐阅读