Question

尝试制作一个简单的待办事项清单。我的AddTodo组件运行正常，我不认为这是导致此问题的原因，但是我的Flatlist并未显示数据。我不知道为什么，因为没有错误。无论是否使用滚动视图，都会出现该问题。

我尝试弄乱项目的宽度和高度以及列表本身，但似乎没有办法解决问题。

我的mainTodo文件：

import React, { Component } from 'react';
import { Text, View, StyleSheet, FlatList, ScrollView } from 'react-native';
import AddTodo from './AddTodo';
import TodoItem from './TodoItem';

class MainTodo extends Component {
  constructor() {
    super();
    this.state = {
      textInput: '',
      todos: [
        { id: 0, title: 'walk rocky', completed: false },
        { id: 1, title: 'pickup dinner', completed: false }
      ]
    };
  }

  addNewTodo() {
    let todos = this.state.todos;
    todos.unshift({
      id: todos.length + 1,
      todo: this.state.textInput,
      completed: false
    });

    this.setState({
      todos,
      textInput: ''
    });
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <AddTodo
          textChange={textInput => this.setState({ textInput })}
          addNewTodo={() => this.addNewTodo()}
          textInput={this.state.textInput}
        />
        <ScrollView>
          <FlatList
            style={{ flex: 1 }}
            data={this.state.todos}
            extraData={this.state}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => {
              return (
                <TodoItem todoItem={item} />
              );
            }}
          />
        </ScrollView>
      </View>
    );
  }
}

export default MainTodo;

我的TodoItem文件：

import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

class TodoItem extends Component {
  render() {
    const todoItem = this.props.todoItem;

    return (
      <View>
        <TouchableOpacity style={styles.todoItem}>
          <Text style={(todoItem.completed) ? { color: '#aaaaaa' } : { color: '#313131' }}>
            {todoItem.title}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  todoItem: {
    width: 40,
    height: 40,
    borderBottomColor: '#DDD',
    borderBottomWidth: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: 15
  }
});

export default TodoItem;

在我的addtodo组件下，什么都没有显示，只是一个空白屏幕。

Answer 1

在maintodo文件中，您正在渲染AddTodo component，但是我没有看到您的AddTodo component。因此，您可以相应地更新代码。

在TodoItem中，删除应用于style的{{1}}，使您的代码看起来像

TouchableOpacity

在import React, { Component } from 'react'; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; class TodoItem extends Component { render() { const todoItem = this.props.todoItem; return ( <View> <TouchableOpacity style={styles.todoItem}> <Text style={(todoItem.completed) ? { color: '#aaaaaa' } : { color: '#313131' }}> {todoItem.title} </Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ }); export default TodoItem;

中

将您的MainTodo函数更新为

addNewTodo

以父addNewTodo = () => { const todo = { id: this.state.todos.length, title: this.state.textInput, completed: false } this.setState({todos: [...this.state.todos, todo ], textInput: ""}) }为TextInput创建Button和View，因此，flexDirection: "row"更改后，其值为TextInput，而{按下{1}}将会创建新的set in the textInput并将其添加到Button并将object的值设置为空。

，最终代码可以为

todos

Answer 2

使用代码

mainTodo文件：

import React, { Component } from 'react';
import { Text, View, StyleSheet, FlatList, ScrollView } from 'react-native';
import AddTodo from './AddTodo';
import TodoItem from './TodoItem';

class MainTodo extends Component {
  constructor() {
    super();
    this.state = {
      textInput: '',
      todos: [
        { id: 0, title: 'walk rocky', completed: false },
        { id: 1, title: 'pickup dinner', completed: false }
      ]
    };
  }

  addNewTodo() {
    let todos = this.state.todos;
    todos.unshift({
      id: todos.length + 1,
      todo: this.state.textInput,
      completed: false
    });

    this.setState({
      todos,
      textInput: ''
    });
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <AddTodo
          textChange={textInput => this.setState({ textInput })}
          addNewTodo={() => this.addNewTodo()}
          textInput={this.state.textInput}
        />
        <ScrollView>
          <FlatList
            style={{ flex: 1 }}
            data={this.state.todos}
            extraData={this.state}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => {
              return (
                <TodoItem todoItem={item} />
              );
            }}
          />
        </ScrollView>
      </View>
    );
  }
}

export default MainTodo;

TodoItem文件：

import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

class TodoItem extends Component {
  render() {
    const todoItem = this.props.todoItem;

    return (
      <View>
        <TouchableOpacity style={styles.todoItem}>
          <Text style={(todoItem.completed) ? { color: '#aaaaaa' } : { color: '#313131' }}>
            {todoItem.title}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  todoItem: {
    width: 40,
    height: 40,
    borderBottomColor: '#DDD',
    borderBottomWidth: 1,
    backgroundColor:'red',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: 15
  }
});
export default TodoItem;

平面清单数据未显示在屏幕上

2 个答案: