react-native - React Navigator 5 Stack“组件”不返回任何内容

问题描述

我正在使用 React Native 为我的网站创建我的应用程序，由于我无法弄清楚如何从滚动中修复标题，我找到了 React Navigator 5 的替代方法。但是，在中<Stack.Screen name="Home" component={Home} />，它只显示 iPhone，上面只有一个文本说“Home”，它是来自的名称参数Stack.Screen，它应该显示我从我调用的 API 获得的列表，因为我FlatList在 React Navigation 之前测试了显示：这是代码：

import React, { Component, useState, useEffect } from 'react';
import { Text, View, ScrollView, Image, Platform, TouchableHighlight, SafeAreaView, FlatList, StyleSheet } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function Main() {
    return (
        <SafeAreaView>
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen
                        name="Home"
                        component={Home} //Class component, Turning it to Function Component no luck for me to fix.
                    />
                </Stack.Navigator>
            </NavigationContainer>
        </SafeAreaView>
    );
}

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            postlists: [],
            postlistsnum: 0,
        }
    }

    componentDidMount() {
        this.SendAPI();
    }

    SendAPI() {
        //any api get command here
    }

    postRow({ item }) {
        return (
            <View
                style={PostListStyles.post}>
                <Text>{item.title}</Text>
            </View>
        )
    }

    render() {
        return (
            <FlatList
                data={this.state.postlists}
                renderItem={this.postRow}
                scrollEnabled={false}
                style={{
                    marginTop: 50,
                }}
            />
        )
    }
}

export default Main;

标签： react-nativereact-native-androidreact-navigationreact-native-ios

react-native - React Navigator 5 Stack“组件”不返回任何内容

问题描述

解决方案

推荐阅读