Question

我正在阅读React Native教程，并且试图学习React Native。我正在使用react-navigation@4.1.1，它不起作用。我已经安装了正确的依赖项才能使项目运行。这是我的代码...

app.js

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

//const fetchFonts = ()=>{
  //return Font.loadAsync({
    //'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),
   // 'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf')
 // });
//};


export default function App() {
 // const [fondLoaded, setFontLoaded] = useState(false);
  //if (!fondLoaded){
    //return ( <AppLoading 
    //startAsync= {fetchFonts}
   // onFinish= {()=> setFontLoaded}
    ///>
    //);
  //}
  return (
    <MealsNavigator/>
  );
}

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

保存导航的mealsnavigoter.js

import {createStackNavigator} from 'react-navigation-stack';
import { createAppContainer} from 'react-navigation';
import CategoriesScreen from '../../screens/CategoriesScreen';
import CategoryMealScreen from '../../screens/CategoryMealScreen';
import MealDetailScreen from '../../screens/MealDetailScreen';



const MealsNavigator = createStackNavigator({
    Categories: CategoriesScreen,
    CategoriesMeals: {
        screen: CategoryMealScreen
    },
    MealDetal: MealDetailScreen
});

export default createAppContainer(MealsNavigator);

按下按钮时具有按钮的类别屏幕应该导航到类别用餐屏幕

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

const CategoriesScreen = props =>{
    return(
        <View style={styles.screen}>
            <Text>The Categories Screen!</Text>
            <Button title="Go to Meals" onPress={()=>{props.navigation.navigate('CategoryMeals');}} />
        </View>
    );

};

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


export default CategoriesScreen;

我要导航到的

categoryMeals屏幕

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

const CategoryMealScreen = props =>{
    return(
        <View style={styles.screen}>
            <Text>The Category Meal Screen!</Text>
        </View>
    );

};

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


export default CategoryMealScreen;

Answer 1

简单的拼写错误。更改您的

<Button title="Go to Meals" onPress={()=>{props.navigation.navigate('CategoryMeals');}} />

到

<Button title="Go to Meals" onPress={()=>{props.navigation.navigate('CategoriesMeals');}} />

反应导航无法按按钮

1 个答案: