Question

我是本机反应的新手。我试图创建一个待办事项应用程序，非常简单。但我不知道为什么未创建待办事项中的文本

import React, { useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button,
  TextInput,
  FlatList,
  Dimensions
} from 'react-native';

export default function App() {
  const [task, setTaskText] = useState('')
  const [tasks, setTasks] = useState([])

  const addTask = () => {
    setTasks([...tasks, { key: Math.random().toString(), text: task}])
  }

  return (
    <View style={styles.container}>
      <View style={styles.form}>
        <TextInput
          onChangeText={setTaskText}
          value={task}
          placeholder="Type a task..."
          style={styles.input}
          multiline
        />
        <Button title="Add Task" style={styles.button} onPress={addTask} />
      </View>
      <FlatList
        style={styles.itemContainer}
        data={tasks}
        renderItem={itemData => (
          <View style={styles.taskItem}>
            <Text style={styles.taskText}>{itemData.text}</Text><Button title="Complete" />
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 32,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  form: {
    // flex: 1,
    flexDirection: 'row',
    padding: 32,
    justifyContent: 'space-between',
  },
  button: {
    fontSize: 32,
    padding: 5
  },
  tasks: {
    flex: 1,
    alignContent: 'flex-start',
  },
  input: {
    flex: 1,
    fontSize: 22,
  },
  itemContainer: {
    flex: 1,
    width: Dimensions.get('window').width,
    padding: 20,
    borderColor: 'red',
    borderWidth: 1
  },
  taskItem: {
    padding: 10,
    borderColor: 'black',
    borderWidth: 1,
    backgroundColor: '#efefef',
    marginBottom: 10,
    alignContent: 'center',
    justifyContent: 'center',
    flexDirection: 'row'
  },
  taskText: {
    flex: 1,
    fontSize: 24,
    borderColor: 'yellow',
    borderWidth: 1,
    color: 'black',
    textAlign: 'left'
  }
});

因此，我尝试使用一个平面列表，并提供了一些边框颜色来确定要渲染的组件。我可以看到该文本组件已渲染，但是没有内容有人可以帮忙吗？出了什么问题？

Answer 1

您的实现是错误的。应该是renderItem({item, index, separators})

对于每个商品，您都应该像item.text

那样消费它

  <FlatList
    style={styles.itemContainer}
    data={tasks}
    renderItem={ ({item}) => (
      <View style={styles.taskItem}>
        <Text style={styles.taskText}>{item.text}</Text><Button title="Complete" />
      </View>
    )}
  />

反应本地文本组件未呈现

1 个答案: