爲什麼我在我的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);