reactjs - 如何使用类创建堆栈屏幕

Question

我正在编写一个将有多个页面的应用程序。我使用 '@react-navigation/native' 和 '@react-navigation/stack' 在这些页面之间导航。当我在 Stack.Screen 的组件中编写函数名称时，它可以正常工作。但我不明白课堂电话是如何进行的。

api.js

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

export default function App(props) {
  // Load any resources or data that we need prior to rendering the app
    return (
      <View style={styles.container}>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Homa Page" component={HomeScreen}/>
          </Stack.Navigator>
        </NavigationContainer>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

屏幕/HomeScreen.js

import * as React from 'react';
import { Text, View } from 'react-native';
import { getSummary } from '../data/getSummary.js';

export class HomeScreen extends Component {
  constructor(props){
    super(props);
    this.state ={ 
    isLoading: true,
  }
  this.getSummary = getSummary.bind(this)
  }

  componentDidMount(){
  this.getSummary;
  }

  render(){
        return (
              <View style={{flex: 1, paddingTop:20}}>
              <FlatList
                    data={ this.state.data}


            keyExtractor={(item) => item.CountryCode}
                renderItem={({ item }) => (
                    <View> 
                    <Text>Country:{item.CountryCode}</Text>>
                    </View>
                )}
          />
          </View>
    );
  } 
}

标签： reactjsreact-nativereact-native-navigation