反应导航中的FlatList渲染问题

时间:2020-02-01 18:38:52

标签: react-native react-native-android react-native-flatlist react-native-navigation

在尝试出现此错误消息后,我试图使用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;

1 个答案:

答案 0 :(得分:0)

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

<View>{props}</View>

props是一个对象,您不能在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>
    )
}