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

在上面的代码片段中，我没有看到从条目文件中返回默认的Navigator，而在 React Native 中默认为App.js。 >

我假设您刚刚开始学习React Native，所以我将为您省去所有次要的细节，并逐步引导您完成解决方案。

我将App.js文件重构为/components/Home.js中的新组件文件。
在Navigator中添加了一个默认堆栈App.js，该堆栈具有两个屏幕，分别是“首页”和“书本”。
现在，您可以访问Navigation和Home组件中的所有Books道具，因为它们是在App.js的Navigator变量中声明的。

这是您在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',
  }
});

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

1 个答案: