[英]Why am I getting this Transform error in my iOS simulator?
At first, I was using Expo
to run my projects on my physical device which means that it doesn't come with an index.ios.js
and index.android.js
files upon creating a project (All you get is an App.js
file which is equivalent to the aforementioned files). 最初,我是使用
Expo
在物理设备上运行项目的,这意味着在创建项目时它不会附带index.ios.js
和index.android.js
文件(您得到的只是一个App.js
文件,相当于上述文件)。
I then copy and pasted my files/code into a normal React Native
project (not Expo
) which means now I do have index.ios.js
and index.android.js
files. 然后,我将文件/代码复制并粘贴到正常的
React Native
项目(不是Expo
)中,这意味着现在我确实拥有index.ios.js
和index.android.js
文件。 Specifically, I copy & pasted whatever's in App.js
into index.ios.js
hoping it carries out the same functionality. 具体来说,我将
App.js
所有内容复制并粘贴到index.ios.js
希望它执行相同的功能。
I have no idea why it's throwing this me error upon hitting Run
to see what will show up on my iOS
simulator. 我不知道为什么在点击
Run
以查看将在我的iOS
模拟器上显示的内容时为什么引发此错误。
Picture of error included below. 错误图片如下。
Here's index.ios.js
: 这是
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
}
});
Here's BackGround.js
: 这是
BackGround.js
:
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;
Here's CreateAccount.js
: 这是
CreateAccount.js
:
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;
Here's Login.js
: 这是
Login.js
:
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;
When you use standard React-Native you need to register your app with AppRegistry
. 使用标准React-Native时,您需要向
AppRegistry
注册您的应用程序。
If you create a new project react-native-init test
and view the index.ios.js
or index.android.js
files, you will see the below code at the bottom of the file. 如果您创建一个新项目
react-native-init test
并查看index.ios.js
或index.android.js
文件,您将在文件底部看到以下代码。
AppRegistry.registerComponent('test', () => test);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.