Javascript 为什么我的iOS模拟器会出现这种转换错误?
起初,我使用Javascript 为什么我的iOS模拟器会出现这种转换错误?,javascript,ios,reactjs,react-native,expo,Javascript,Ios,Reactjs,React Native,Expo,起初,我使用Expo在我的物理设备上运行我的项目,这意味着在创建项目时,它没有index.ios.js和index.android.js文件(您得到的只是一个与上述文件等效的App.js文件) 然后我将文件/代码复制并粘贴到一个普通的React Native项目(而不是Expo)中,这意味着现在我确实有index.ios.js和index.android.js文件。具体来说,我将App.js中的任何内容复制并粘贴到index.ios.js中,希望它能实现相同的功能 我不知道为什么它会在点击Run
Expo
在我的物理设备上运行我的项目,这意味着在创建项目时,它没有index.ios.js
和index.android.js
文件(您得到的只是一个与上述文件等效的App.js
文件)
然后我将文件/代码复制并粘贴到一个普通的React Native
项目(而不是Expo
)中,这意味着现在我确实有index.ios.js
和index.android.js
文件。具体来说,我将App.js
中的任何内容复制并粘贴到index.ios.js
中,希望它能实现相同的功能
我不知道为什么它会在点击Run
查看我的iOS
模拟器上会显示什么时抛出这个错误
错误图片包括在下面
下面是index.ios.js
:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import {Navigator} from 'react-native-deprecated-custom-components';
import BackGround from './components/BackGround';
import Login from "./components/Login";
import CreateAccount from "./components/CreateAccount";
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
<Navigator
initialRoute={{id: 'Login'}}
renderScene={this.navigatorRenderScene}
/>
</View>
);
}
navigatorRenderScene() {
_navigator = _navigator;
switch(route.id) {
case 'Login':
return (<Login navigator={navigator} title="Login"/>);
case 'CreateAccount':
return (<CreateAccount navigator={navigator} title="Create Account" />);
}
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
import React, {Component} from 'react';
import {StyleSheet, Image, View, Text} from 'react-native';
import Login from './Login';
class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<View style={styles.second}>
<View style={styles.movementTitle}>
<Text style={styles.title}>Dendro</Text>
</View>
<Login/>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)'
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
},
title: {
fontSize: 34,
textAlign: 'center',
justifyContent: 'center',
flexDirection: 'row',
fontFamily: 'Bodoni 72'
}
// movementTitle: {
// paddingBottom: 34
// }
});
export default BackGround;
import React, {Component} from 'react';
import {Text} from 'react-native';
class CreateAccount extends Component {
render() {
return(
<Text>Must get to this page</Text>
);
}
}
export default CreateAccount;
import React, {Component} from 'react';
import {StyleSheet, TextInput, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
class Login extends Component {
onButtonPress() {
this.props.navigator.push({
id: 'Create Account'
});
}
render() {
return(
<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
<TextInput
style={styles.input}
returnKeyType={"next"}
keyboardType={"email-address"}
autoCorrect={false}
placeholder={"Email"}
/>
<TextInput
style={styles.input}
returnKeyType={"go"}
placeholder={"Password"}
secureTextEntry
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.onButtonPress.bind(this)}>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20 // Length of text input boxes.
},
input: {
backgroundColor: '#DAE5FF',
padding: 20,
paddingHorizontal: 15,
marginBottom: 10,
borderRadius: 15
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps',
paddingHorizontal: 10
}
});
export default Login;
下面是CreateAccount.js
:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import {Navigator} from 'react-native-deprecated-custom-components';
import BackGround from './components/BackGround';
import Login from "./components/Login";
import CreateAccount from "./components/CreateAccount";
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
<Navigator
initialRoute={{id: 'Login'}}
renderScene={this.navigatorRenderScene}
/>
</View>
);
}
navigatorRenderScene() {
_navigator = _navigator;
switch(route.id) {
case 'Login':
return (<Login navigator={navigator} title="Login"/>);
case 'CreateAccount':
return (<CreateAccount navigator={navigator} title="Create Account" />);
}
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
import React, {Component} from 'react';
import {StyleSheet, Image, View, Text} from 'react-native';
import Login from './Login';
class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<View style={styles.second}>
<View style={styles.movementTitle}>
<Text style={styles.title}>Dendro</Text>
</View>
<Login/>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)'
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
},
title: {
fontSize: 34,
textAlign: 'center',
justifyContent: 'center',
flexDirection: 'row',
fontFamily: 'Bodoni 72'
}
// movementTitle: {
// paddingBottom: 34
// }
});
export default BackGround;
import React, {Component} from 'react';
import {Text} from 'react-native';
class CreateAccount extends Component {
render() {
return(
<Text>Must get to this page</Text>
);
}
}
export default CreateAccount;
import React, {Component} from 'react';
import {StyleSheet, TextInput, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
class Login extends Component {
onButtonPress() {
this.props.navigator.push({
id: 'Create Account'
});
}
render() {
return(
<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
<TextInput
style={styles.input}
returnKeyType={"next"}
keyboardType={"email-address"}
autoCorrect={false}
placeholder={"Email"}
/>
<TextInput
style={styles.input}
returnKeyType={"go"}
placeholder={"Password"}
secureTextEntry
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.onButtonPress.bind(this)}>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20 // Length of text input boxes.
},
input: {
backgroundColor: '#DAE5FF',
padding: 20,
paddingHorizontal: 15,
marginBottom: 10,
borderRadius: 15
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps',
paddingHorizontal: 10
}
});
export default Login;
当您使用标准React Native时,您需要向注册应用程序 如果创建一个新项目
react native init test
并查看index.ios.js
或index.android.js
文件,您将在文件底部看到以下代码
AppRegistry.registerComponent('test', () => test);