无法读取未定义评估 App.js 加载 App.js 的属性“导航”

Question

希望按钮进入进入另一个屏幕： 需要导航屏幕的帮助。 我不断收到错误： 无法读取未定义的属性“导航” 评估 App.js 加载 App.js TypeError：无法读取未定义的属性“导航”

https://snack.expo.io/@ganiyat1/colorful-thrills

import * as React from 'react';
import { Text, View, StyleSheet, ImageBackground, Image, Button } from 'react-native';
import Constants from 'expo-constants';
import { StackNavigator} from 'react-navigation';
import Books from './components/Books';

// You can import from local files

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';


const Book = StackNavigator({
  Books: { screen: Books },
});
    const { navigate } = this.props.navigation;

export default function App() {
  return (
    <View style={styles.container}>
    
      <View style={styles.topContainer}>
      <Text style={styles.title}> Colorful Thrills
    </Text >
      </View>
      <View style={styles.bottomContainer}></View>
      <View style={styles.imageContainer}>
        <Image
          style={styles.image}
          source={require('./assets/bookcover.png')}
        />
         
         <Text style={styles.paragraph}> 
     {"\n"}  BOOKWORMS, UNITE! {"\n"} {"\n"}
      Suspense, Mystery and Thrillers by Authors of Color
      </Text>
      <Button 
      color='#ff914d'
      title= 'ENTER'
      onPress={() =>
          navigate('Books')}
      />
      </View>
    </View>
  );
}

Answer 1

在上面的代码 sn-p 中，我没有看到从入口文件返回默认的 Navigator，在 React Native 中默认为 App.js。

我假设你刚刚开始学习 React Native，所以我将省去你所有的小细节，并引导你完成解决方案。

1. 我将App.js 文件重构为/components/Home.js 中的新组件文件。
2. 在App.js 中添加了一个默认堆栈Navigator，它有两个屏幕，主页和书籍。
3. 现在您可以访问Home 和Books 组件中的所有Navigation 属性，因为它是在App.js 的导航器变量中声明的

这是您在 Expo 上的代码的现场演示。

//App.js

import * as React from 'react';
import { Text, View, StyleSheet, ImageBackground, Image, Button } from 'react-native';
import Constants from 'expo-constants';
import { StackNavigator} from 'react-navigation';
import Books from './components/Books';
import Home from './components/Home'
import { Card } from 'react-native-paper';


const Navigator = StackNavigator({
  Books: { screen: Books },
  Home:{screen:Home}
});
 
export default function App(props) {
   return (
   <Navigator /> 
  );
}

//component/Books.js

import React, { useState } from 'react';
import { StyleSheet, SafeAreaView,Button } from 'react-native';
import MaterialTabs from 'react-native-material-tabs';

const Books = (props) => {
  const {navigation} = props
  const [selectedTab, setSelectedTab] = useState(0);

  return (
    <SafeAreaView style={styles.container}>
      <MaterialTabs
        items={['New Releases', 'All', 'BOM']}
        selectedIndex={selectedTab}
        onChange={setSelectedTab}
        barColor="#1fbcd2"
        indicatorColor="#ff914d"
        activeTextColor="white"
      />

        <Button 
      color='#ff914d'
      title= 'Home'
      onPress={() =>
          navigation.navigate('Home')}
      />
    </SafeAreaView>
  );
};

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

export default Books

//component/Home.js
import React from 'react'
import {View,Text,StyleSheet,Button,Image} from 'react-native' 

const Home = (props) => {
  const {navigation} = props
  return (
     <View style={styles.container}>
    
      <View style={styles.topContainer}>
      <Text style={styles.title}> Colorful Thrills
    </Text >
      </View>
      <View style={styles.bottomContainer}></View>
      <View style={styles.imageContainer}>
        <Image
          style={styles.image}
          source={require('../assets/bookcover.png')}
        />
         
         <Text style={styles.paragraph}> 
     {"\n"}  BOOKWORMS, UNITE! {"\n"} {"\n"}
      Suspense, Mystery and Thrillers by Authors of Color
      </Text>
      <Button 
      color='#ff914d'
      title= 'ENTER'
      onPress={() =>
          navigation.navigate('Books')}
      />
      </View>
    </View>
  )
}

export default Home

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  topContainer: {
    flex: 1,
    backgroundColor: '#ff914d',
  },
  bottomContainer: {
    flex: 1,
    backgroundColor: '#96d0e3',
  },
  imageContainer: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 300,
  },
  title:{
     margin: 24,
    marginTop: 50,
    fontSize: 40,
    fontWeight: 'bold',
    textAlign: 'center',
    fontFamily: 'GillSans-Italic',
  },
  paragraph: {
    margin: 24,
    marginTop: 0,
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
  }
});