StackNavigation проблема в реакции родного приложения - PullRequest
Новая
       4

StackNavigation проблема в реакции родного приложения

0 голосов
/ 09 января 2020

enter image description here

У меня проблема с решением этой ошибки. Нужно ли выполнять рендеринг только с использованием компонентов класса? или есть способ использовать метод функции? Помоги мне, если сможешь. Какое будет мое лучшее решение? Я приложил код ниже

EstesGuideNavigator. js

    import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';

import CategoriesScreen from '../screens/CategoriesScreen';
import PlaceScreen from '../screens/PlacesScreen';
import PlacesDetailScreen from '../screens/PlacesDetailScreen';

const EstesGuideNavigator= createStackNavigator({

    Categories: CategoriesScreen, //mapping CategoriesScreen to Categories which makes easier to navigate
    Places: {
        screen: PlaceScreen
    },

    PlacesDetail:PlacesDetailScreen
});

export default createAppContainer(EstesGuideNavigator);

Ниже было бы приложение. js

import React, {useState}from 'react';
import { StyleSheet, Text, View } from 'react-native';
import *as Font from 'expo-font';
import {Apploading} from 'expo';
import EstesGuideNavigator from './navigation/EstesGuideNavigator';

const fetchFonts = () => {   //fetching costum fonts for my app using Async
  Font.loadAsync({
    'raleway-blackItalic' : require('./assets/fonts/Raleway-BlackItalic.ttf'),
    'raleway-bold' : require('./assets/fonts/Raleway-Bold.ttf'),
    'raleway-regular' : require('./assets/fonts/Raleway-Regular.ttf'),
    'raleway-thin' : require('./assets/fonts/Raleway-Thin.ttf')
  });
};

export default function App() {
const [fontLoaded, setFontLoaded] = useState(false); //initially it's false because app hasn't been loaded 

if (!fontLoaded) {
  return(
  <Apploading 
  startAsync = {fetchFonts} 
  onFinish = {() => setFontLoaded(true) }
  /> //if assets(fonts here) is not loaded we display loading screen and load assets for app
  );

}
return <EstesGuideNavigator/>;
}


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

CategoriesScreen. js

import React from'react-native';
import {View, Text, StyleSheet} from 'react-native';

const CategoriesScreen = props =>{

    return(
        <View style ={styles.screen}>
            <Text> Categories Screen! Dummy </Text>
        </View>
    );
};

const styles = StyleSheet.create({
screen:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
}
});

export default CategoriesScreen;

Это просто фиктивный экран, который я хотел создать.

1 Ответ

1 голос
/ 09 января 2020

Это был неправильный импорт, который реагировал на родной автоматически измененный на моем CategoriesScreen. js.

...