Как создать экран стека с классом - PullRequest
Новая
       12

Как создать экран стека с классом

0 голосов
/ 24 апреля 2020

Я кодирую приложение, которое будет иметь более одной страницы. Для навигации между этими страницами я использую @ response-navigation / native и @ response-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>
    );
  } 
}
...