反应导航中的 FlatList 渲染问题

Question

在刷新出现此错误消息后，我正在尝试使用 react-navigation 在主屏幕中呈现 FlatList：

违反不变性：对象作为 React 子项无效（找到：具有键 {screenProps, navigation} 的对象）。如果您打算渲染一组子项，请改用数组。

//App.js
import React from 'react';
import Navigator from './src/Routes/appRoutes';
import { View, Text, StyleSheet } from 'react-native';
import TodoApp from './src/todoApp';
import SingleTodo from './src/components/singleTodo';

const App = () => {
  return (
    <Navigator />
  );
}

const styles = StyleSheet.create(
  {
    container: {
      padding: 40
    }
  }
)
export default App;






//FlatList screen 

import React, { useState } from 'react';
import { View, FlatList } from 'react-native';
import Todos from './components/todos';
import uuid from 'uuid';

const TodoApp = () => {

    const [todo, setTodo] = useState([
        {
            id: uuid(),
            title: "FFFFFFFFF",
            desc: "first description"
        },
        {
            id: uuid(),
            title: "Second title",
            desc: "Second description"
        }
    ]
    )
    return (
        <View>
            <FlatList
                data={todo}
                renderItem={({ item }) =>
                    <Todos title={item.title} desc={item.desc} />}
                keyExtractor={item => item.id}
            />
        </View>
    );
}


export default TodoApp;






//Routes

import { createStackNavigator } from 'react-navigation-stack';
import Todos from './../components/todos';
import SingleTodo from './../components/singleTodo';
import { createAppContainer } from 'react-navigation';
import { Settings } from './../settings';

const screens = {
    Home: {
        screen: Todos
    },
    SingleTodo: {
        screen: SingleTodo
    }
}
const StackScreens = createStackNavigator(screens);

export default createAppContainer(StackScreens);






//Todos screen
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { NavigationNativeContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Todos = (props) => {
    console.log(props);
    const { title, desc } = props;
    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={() => props.navigation.navigate('SingleTodoScreen')}>
                <View>{props}</View>
                <Text style={styles.listText}>{title}</Text>
            </TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        padding: 15,
        color: "#000",
        borderWidth: 1,
        borderColor: "#eee",
    },
    listText: {
        fontSize: 16
    }


});


export default Todos;

Answer 1

您需要从代码中删除以下行

<View>{props}</View>

props 是一个对象，你不能在你的 JSX 中编写 include 对象。

所以你的功能组件将是这样的。

const Todos = (props) => {
    console.log(props);
    const { title, desc } = props;
    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={() => props.navigation.navigate('SingleTodoScreen')}>
                <Text style={styles.listText}>{title}</Text>
            </TouchableOpacity>
        </View>
    )
}

反应导航中的 FlatList 渲染问题

FlatList Render issue in react-navigation

react-native

react-native-android

react-native-navigation

react-native-flatlist