Fatal编程技术网
  • react-native/
  • React native 平面列表数据未显示在屏幕上

React native 平面列表数据未显示在屏幕上

react-native

React native 平面列表数据未显示在屏幕上,react-native,expo,React Native,Expo,试着做一个简单的待办事项清单。我的AddTodo组件工作正常，我不认为这是导致问题的原因，但我的平面列表没有显示数据。我不知道为什么，因为没有错误。无论是否使用滚动视图，问题都会出现 我试过搞乱项目的宽度和高度以及列表本身，但似乎没有任何效果 我的mainTodo文件： import React, { Component } from 'react'; import { Text, View, StyleSheet, FlatList, ScrollView } from 'react-nati

试着做一个简单的待办事项清单。我的AddTodo组件工作正常，我不认为这是导致问题的原因，但我的平面列表没有显示数据。我不知道为什么，因为没有错误。无论是否使用滚动视图，问题都会出现

我试过搞乱项目的宽度和高度以及列表本身，但似乎没有任何效果

我的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;

import React，{Component}来自'React'；
从“react native”导入{Text，View，StyleSheet，FlatList，ScrollView}；
从“/AddTodo”导入AddTodo；
从“/TodoItem”导入TodoItem；
类MainTodo扩展组件{
构造函数（）{
超级（）；
此.state={
文本输入：“”，
待办事项：[
{id:0，标题：'walk rocky'，已完成：false}，
{id:1，标题：'Picking Diner'，已完成：false}
]
};
}
addNewTodo（）{
让todos=this.state.todos；
todos.unshift({
id:todos.length+1，
todo:this.state.textInput，
已完成：false
});
这是我的国家({
待办事项，
文本输入：“”
});
}
render（）{
返回(
this.setState（{textInput}）}
addNewTodo={（）=>this.addNewTodo（）}
textInput={this.state.textInput}
/>
index.toString（）}
renderItem={（{item}）=>{
返回(
);
}}
/>
);
}
}
导出默认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;

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、TouchableOpacity、视图}；
类TodoItem扩展了组件{
render（）{
const todoItem=this.props.todoItem；
返回(
{todoItem.title}
);
}
}
const styles=StyleSheet.create({
待办事项：{
宽度：40，
身高：40，
borderBottomColor:“#DDD”，
边界宽度：1，
flexDirection:'行'，
对齐项目：“居中”，
justifyContent:'之间的空间'，
paddingLeft:15
}
});
将默认值导出到doitem；
在我的addtodo组件下没有显示任何内容，它只是一个空白屏幕。

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

在
TodoItem
中，删除应用于
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;
创建
文本输入
和
按钮
，将父级
视图
设置为
flexDirection:“行”
因此，当更改
TextInput
时，其值在TextInput中设置
，当按下
按钮时，它将创建新的
对象
，并将其添加到
todos
中，并将
TextInput
的值设置为空

最终的代码可以是


import React, { Component } from 'react';
import { Text, View, StyleSheet, FlatList, ScrollView, TextInput, Button } from 'react-native';
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 = () => {
    const todo = {
      id: this.state.todos.length,
      title: this.state.textInput,
      completed: false
    }
    this.setState({todos: [...this.state.todos, todo ], textInput: ""})
  }

  render() {
    return (
      <View style={{ flex: 1, marginTop: 30, paddingHorizontal: 20 }}>
      <View style={{flexDirection: "row", alignItems: "center", justifyContent: "space-between"}}>
      <TextInput  style={{borderWidth: 1, borderColor: "black"}} onChangeText={textInput => this.setState({textInput})} placeholder="Enter todo text" value={this.state.textInput} />
         <Button onPress={this.addNewTodo} title="Add todo" />
         </View>

          <FlatList
           contentContainerStyle={{flexGrow: 1}}
            data={this.state.todos}
            extraData={this.state.todos}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => {
              return (
                <TodoItem todoItem={item} />
              );
            }}
          />
      </View>
    );
  }
}

export default MainTodo;



import React，{Component}来自'React'；
从“react native”导入{Text，View，StyleSheet，FlatList，ScrollView，TextInput，Button}；
从“/TodoItem”导入TodoItem；
类MainTodo扩展组件{
构造函数（）{
超级（）；
此.state={
文本输入：“”，
待办事项：[
{id:0，标题：'walk rocky'，已完成：false}，
{id:1，标题：'Picking Diner'，已完成：false}
]
};
}
addNewTodo=（）=>{
常数todo={
id:this.state.todos.length，
标题：this.state.textInput，
已完成：false
}
this.setState（{todos:[…this.state.todos，todo]，textInput:“}）
}
render（）{
返回(
this.setState（{textInput}）placeholder=“Enter todo text”value={this.state.textInput}/>
index.toString（）}
renderItem={（{item}）=>{
返回(
);
}}
/>
);
}
}
导出默认MainTodo；

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

在
TodoItem
中，删除应用于
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;


创建
文本输入
和
按钮
，将父级
视图
设置为
flexDirection:“行”
因此，当更改
TextInput
时，其值在TextInput
中设置
，当按下
按钮时，它将创建新的
对象
，并将其添加到
todos
中，并将
TextInput
的值设置为空

最终的代码可以是


import React, { Component } from 'react';
import { Text, View, StyleSheet, FlatList, ScrollView, TextInput, Button } from 'react-native';
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 = () => {
    const todo = {
      id: this.state.todos.length,
      title: this.state.textInput,
      completed: false
    }
    this.setState({todos: [...this.state.todos, todo ], textInput: ""})
  }

  render() {
    return (
      <View style={{ flex: 1, marginTop: 30, paddingHorizontal: 20 }}>
      <View style={{flexDirection: "row", alignItems: "center", justifyContent: "space-between"}}>
      <TextInput  style={{borderWidth: 1, borderColor: "black"}} onChangeText={textInput => this.setState({textInput})} placeholder="Enter todo text" value={this.state.textInput} />
         <Button onPress={this.addNewTodo} title="Add todo" />
         </View>

          <FlatList
           contentContainerStyle={{flexGrow: 1}}
            data={this.state.todos}
            extraData={this.state.todos}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => {
              return (
                <TodoItem todoItem={item} />
              );
            }}
          />
      </View>
    );
  }
}

export default MainTodo;



import React，{Component}来自'React'；
从“react native”导入{Text，View，StyleSheet，FlatList，ScrollView，TextInput，Button}；
从“/TodoItem”导入TodoItem；
类MainTodo扩展组件{
构造函数（）{
超级（）；
此.state={
文本输入：“”，
待办事项：[
{id:0，标题：'walk rocky'，已完成：false}，
{id:1，标题：'Picking Diner'，已完成：false}
]
};
}
addNewTodo=（）=>{
常数todo={
id:this.state.todos.length，
标题：this.state.textInput，
已完成：false
}
this.setState（{todos:[…this.state.todos，todo]，textInput:“}）
}
render（）{
返回(
this.setState（{textInput}）placeholder=“Enter todo text”value={this.state.textInput}/>
index.toString（）}
renderItem={（{item}）=>{
返回(
);
}}
/>
);
}
}
导出默认MainTodo；

使用代码

mainTodo文件：


import React，{Component}来自'React'；
从“react native”导入{Text，View，StyleSheet，FlatList，ScrollView}；
从“.”导入AddTodo/Add

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;