为什么我在我的iOS模拟器中得到这个转换错误？

Question

起初，我使用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模拟器上会显示什么。

错误图片包含在下面。

Transform Error

这里的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 
    } 
}); 

这里的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; 

这里的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; 

这里的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; 

Answer 1

当您使用标准的阵营，本土需要用 AppRegistry注册您的应用程序。

如果您创建一个新项目react-native-init test并查看index.ios.js或index.android.js文件，您将在文件底部看到下面的代码。

AppRegistry.registerComponent('test',() => test);