FlatList Render проблема в реагировать навигации

Question

Я пытаюсь отобразить FlatList на домашнем экране, используя реагирующую навигацию, после обновления появляется следующее сообщение об ошибке:

Инвариантное нарушение: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {screenProps) , навигация}). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.

//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 - это объект, и вы не можете написать объект include в вашем JSX.

функциональный компонент будет таким.

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