javascript - React - 本机 IOS/Android 模拟器问题
问题描述
我目前正在使用 react-native 构建我的第一个应用程序。当我尝试为 IOS 和 Android 运行模拟器时,我遇到了错误。当我尝试为 IOS 运行模拟器时,使用“npm run ios”,它成功运行了模拟器,但是当我尝试在 App.js 中进行更改时,它们没有出现在模拟器菜单中......我尝试重新启动模拟器几次,但它没有工作,我也无法在模拟器中使用命令,例如'cmd + R'重新加载,即使没有错误消息。当涉及到 Android 时,我什至无法运行模拟器(使用 'npm run android')并且我总是遇到以下错误消息:
npm 错误!代码 ELIFECYCLE npm 错误!errno 1 npm 错误!feedIt@0.0.1 安卓:
react-native run-android
npm 错误!退出状态 1 npm ERR!npm 错误!在 feedIt@0.0.1 android 脚本中失败。npm 错误!这可能不是 npm 的问题。上面可能有额外的日志输出。npm 错误!可以在以下位置找到此运行的完整日志:npm ERR!
/Users/maurice/.npm/_logs/2020-07-13T08_19_29_328Z-debug.log Maurices-MacBook-Air:myApp maurice$
这是我的 App.js:
/** * Sample React Native App *
https://github.com/facebook/react-native * * @format * @flow
strict-local */
import 'react-native-gesture-handler';
import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
const App = () => {
return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
);
};
export default App;
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next!
</Text>
</View>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});
export default App;
我无法解决问题并希望得到任何帮助。问候,莫里斯
解决方案
将您的代码更改为:
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next!
</Text>
</View>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});
export default App;
你已经定义了你的App
组件两次。而且您还有一些重复/矛盾的进口。
推荐阅读
- android-studio - btn(按钮)步骤显示错误和插页式广告不起作用
- tensorflow - 使用 TensorFlow Data API 和 Keras 模型预测批次
- php - PHP 变量子类和访问父方法
- java - RecycerView 不会显示加载的项目
- python - 硒蟒 | 'find_elements_by_class_name' 不返回任何内容
- ios - React Native - iOS - 无效的`Podfile`文件:nil:NilClass的未定义方法`[]'
- tensorflow - 使用 tensorflow 创建点的二维张量
- node.js - 我如何在 adonis.js 上使用多个模型 jwt auth
- python - 使用带有 Python 的 Gmail API 获取消息,然后发送到另一封电子邮件
- javascript - javascript对象声明中的反引号