未呈現 React Native Text 組件

Question

我是 React Native 的新手。 我試圖創建一個待辦事項應用程序，足夠簡單。 但我不知道為什么創建的待辦事項中的文本未呈現

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>
    )}
  />