android - FlatList 在 React Native 中不滚动

Question

我有一个带有样式组件的 React Native todo 应用程序。但是，我的 FlatList 没有滚动我已经尝试了互联网上的所有内容。

我曾尝试添加一个View组件，style={{flex: 1}}但这并没有帮助。我尝试添加flexGrow:1到contentContainerStyleFlatList 的道具，但它仍然没有帮助。我也在网上尝试了不同的技巧，但没有任何效果。如果有人可以提供帮助，以下是我的代码：

import React, { useState } from 'react';
import { Keyboard, FlatList, Platform } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import Task from './components/Task'
import styled from "styled-components/native";

const Container = styled.View`
    flex: 1;
    background-color: #EBEAED;
`;

// using padding because scroll view would be implemented later and makes more view with padding.
const Wrapper = styled.View`
    padding-top: 80px;
    padding-left: 20px;
    padding-right: 20px;
`;

const Title = styled.Text`
    font-size: 24px;
    font-weight: bold;
    text-align: center;
`;

const TaskList = styled.View`
    margin-top: 30px;
`;

const InputWrapper = styled.KeyboardAvoidingView`
    position: absolute;
    bottom: 60px;
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
`;
const TaskInput = styled.TextInput`
    padding:17px
    background-color: #FFFFFF;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-color: #28c72b;
    width: 250px;
`;

const TouchableOpacity = styled.TouchableOpacity``;

const ErrorMessageWrapper = styled.View`
    margin-top: 50%;
`;
const ErrorMessage = styled.Text`
    text-align: center;
    font-size: 16px;
`;

const AddBtn = styled.View`
    width: 60px;
    height: 60px;
    border-color: #28c72b;
    background-color: #28c72b;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px
    justify-content: center;
    align-items: center;
    border-width: 1px; 
`;

const App = () => {
  const [task, setTask] = useState(null);
  const [tasks, setTasks] = useState([])

  const handleAddTask = () => {
    if (!task) {
      return;
    }
    Keyboard.dismiss();
    setTasks([...tasks, task]) // using es6 spread operator.
    setTask(null)
  }

  const handleDeleteTask = (taskIndex) => {
    let currTask = [...tasks];
    currTask.splice(taskIndex, 1);
    setTasks(currTask);
  }

  return ( 
    <Container>
      <Wrapper>
        <Title>Today's Tasks</Title>
          {/* handle no task */}
          {tasks && tasks.length === 0 && (<ErrorMessageWrapper><ErrorMessage> No Task Found. Add Task!</ErrorMessage></ErrorMessageWrapper>)}
        <TaskList>
          {/* handle tasks display */}
          <FlatList
            data={tasks}
            renderItem={({item, index}) => ( <Task key={index} task={item} handleDeleteTask={() => handleDeleteTask(index)} /> )}
            keyExtractor={(task) => task}
          />
        </TaskList>
      </Wrapper>

      {/* This makes the keyboard to push the View upwards when it is displayed instead of covering it. */}
      <InputWrapper
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        keyboardVerticalOffset={Platform.OS === "ios" ? 20 : 0} // show why!!!
      >
        <TaskInput 
          placeholder={"Write your task"} 
          value={task} 
          onChangeText={text => setTask(text)} 
        />
          <TouchableOpacity onPress={() => handleAddTask()}>
            <AddBtn>
              <MaterialIcons name="add-task" size={24} color="black" />
            </AddBtn>
          </TouchableOpacity>
      </InputWrapper>
    </Container>
  );
}

export default App;

下面是代码Task component：

import React from 'react'
import styled from "styled-components/native";
import { FontAwesome } from '@expo/vector-icons';

const Container = styled.TouchableOpacity`
    background-color: #FFFFFF;
    padding: 15px;
    border-radius: 10px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
`;

const TaskDesc = styled.View`
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
`;

const Square = styled.View`
  margin-right: 15px;
`;

// to make text not to push the other items off the screen. To limit it to the View conainer.
const Desc = styled.Text`
  max-width: 80%; 
`;

const Disc = styled.View`
  width: 12px;
  height: 12px;
  border-color: #28c72b;
  border-width: 2px;
  border-radius: 5px;
`;


const Task = ({ task, handleDeleteTask }) => { 
  return (
    <Container onPress={handleDeleteTask}>
      <TaskDesc>
        <Square>
          <FontAwesome name="tasks" size={24} color="#156616" />
        </Square>
        <Desc>{task}</Desc>
      </TaskDesc>
      <Disc />
    </Container>
  )
}

export default Task;

我不知道我到底做错了什么。

标签： androidcssreactjsreact-nativestyled-components