时间戳

首页 > 解决方案 > 无法从“App.js”解析“react-navigation-stack”

javascript - 无法从“App.js”解析“react-navigation-stack”

问题描述

***package.json***
{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.5.1",
    "expo": "~37.0.3",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-paper": "^3.10.1",
    "react-native-safe-area-context": "^3.0.5",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.3.9",
    "react-navigation-material-bottom-tabs": "^2.2.12",
    "react-navigation-stack": "^2.7.0"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.1.0",
    "@babel/core": "^7.8.6"
  },
  "private": true
}

您好，我正面临反应导航问题在此处输入图像描述

我安装了反应导航依赖项，但错误仍然存​​在

***App.js***
import React from 'react'
import{StyleSheet,Text,View}from 'react-native'
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";

import SignUp from './App/SignUp'
import SignIn from './App/SignIn'
import ForgotPassword from './App/ForgotPassword'

 class App extends React.Component{
  render(){
    return(
      <View style={styles.container}>
      </View>
    )
  }
}
const navigator=createStackNavigator(
  {
    Registration:SignUp,
    Login:SignIn,
    Password:ForgotPassword
  },
  {
initialRouteName:'SignUp',
defaultNavigationOptions:{
  title:'App'
}
  }
)
const styles=StyleSheet.create({
  container:{
    flex:1,
    justifyContent:'center',
    backgroundColor:'#fff',
    paddingLeft:60,
    paddingRight:60,
  },
})
export default createAppContainer(navigator)

***SignUp***
import React from 'react'
import{StyleSheet,Text,View,TextInput,TouchableOpacity, ImagePropTypes}from 'react-native'

export default class SignUp extends React.Component{
  render(){
    return(
      <View style={styles.signup}>
         <Text style={styles.Text}/>
         <Text style={styles.string}>Hi There!</Text>
         <Text style={styles.string}>Welcome To APPTAK</Text>
    <Text style={styles.Text}>FULL NAME</Text>
    <TextInput style={styles.textinput} placeholder="Please Enter Your Name" underlineColorAndroid={'transparent'} />
    <Text style={styles.Text}>EMAIL</Text>
    <TextInput style={styles.textinput} placeholder="Please Enter Your Email" underlineColorAndroid={'transparent'} keyboardType='email-address' />
    <Text style={styles.Text}>PASSWORD</Text>
    <TextInput style={styles.textinput} placeholder="Please Enter Your Password" secureTextEntry={true} underlineColorAndroid={'transparent'} />
    <Text style={styles.Text}>MOBILE NUMBER</Text>
    <TextInput style={styles.textinput} placeholder="Please Enter Your Mobile Number"  underlineColorAndroid={'transparent'} keyboardType='numeric'/>
    <Text style={styles.Text}>CNIC</Text>
    <TextInput style={styles.textinput} placeholder="Please Enter Your CNIC"  underlineColorAndroid={'transparent'}          keyboardType='numeric'/>
     <TouchableOpacity style={styles.button}>
         <Text style={styles.btntext}>Sign Up</Text>
     </TouchableOpacity>

      </View>
      
    )

  }
}
const styles=StyleSheet.create({
  signup:{
    alignSelf:'stretch',
  },
  header:{
      fontSize:24,
      color:'#6069f2',
      paddingBottom:10,
      marginBottom:40,
      borderBottomColor:'#199187',
      borderBottomWidth:1,
  },
  textinput:{
      alignSelf:'stretch',
      height:40 ,
      marginBottom:30,
      color:'#1D1105',
      borderBottomColor:'#f8f8f8',
      borderBottomWidth:1,
  },
  button:{
      alignSelf:'stretch',
      alignItems:'center',
      padding:20,
      backgroundColor:'#6069f2',
      marginTop:30,  
  },
  btntext:{
   color:'#fff',
   fontWeight:'bold'
  },
  string:{
    alignContent:'center',
    justifyContent:'center',
    textAlign: 'center',

  }
})

尝试了堆栈溢出中已经存在的所有解决方案，至少没有一个对我有用

标签： javascriptreact-native

解决方案

React 导航现在从不同的路径导入

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

也安装这些软件包

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

文档 https://reactnavigation.org/docs/getting-started

推荐阅读