Question

我使用这些命令创建项目：

＆＃34; create-react-native-app AwesomeProject＆＃34;
＆＃34; cd AwesomeProject＆＃34;
＆＃34; npm start＆＃34;
当我接受命令＆＃34; npm install --save react-navigation＆＃34;在我的反应导航项目中，它创建了一个＆＃34; react-navigation＆＃34;文件夹，但当我开始我的项目＆＃34; npm start＆＃34;并运行到ios模拟器它无法启动并出错＃34;构建JavaScript包失败＆＃34;。我想将LogingForm.js转到Status.js

LoginForm.js

import React, { Component } from 'react';
import { View, StyleSheet, TextInput, TouchableOpacity, Text} from 'react-native';

export default class LoginForm extends React.Component {
render() {
    return (
      <View style={styles.Container}> 

       <View style={styles.box}> 

      <TextInput
      placeholder="Username"
      returnKeyType="next"
      onSubmitEditing={() => this.passwordInput.focus()}
      kesyboardType="email-address"
      style={styles.input}
      />

      <TextInput
      placeholder="Password"
      returnKeyType="go"
      secureTextEntry
      ref={(input) => this.passwordInput = input}
      style={styles.input}
      />

      <TouchableOpacity style={styles.buttonContainers}> 
        <Text style={styles.buttonText}>  
        Login
        </Text>


      </TouchableOpacity>
     </View>
      </View>

    );
  }
}

   const styles = StyleSheet.create({
      Container: {
        padding: 20,
        height: 700,


        backgroundColor: '#ecf0f1'

      },
      input: {

        height: 40,
        backgroundColor: '#95a5a6',
        marginBottom: 10,
        color: '#FFF',
        paddingHorizontal: 10,
        borderRadius: 10
      },
      buttonContainers: {
       backgroundColor: '#03A9F4',
       paddingVertical: 10,
       borderRadius: 10

      },
      buttonText: {
        textAlign: 'center',
        fontWeight: '700',
        color: 'white',
        fontSize: 20,
        fontWeight: 'bold'
      },
      box:{
        marginTop: 250,
        padding: 20,
        height: 700,


      }

});

Status.js

import React, { Component } from 'react';
import { View, StyleSheet, TextInput, TouchableOpacity, Text} from 'react-native';

export default class CheckStatus extends React.Component {

render() {
    return (

     <View style={styles.backgroundView}> 
      <View style={styles.Container}>

      <TouchableOpacity 
      style={styles.buttonContainers}> 
        <Text style={styles.buttonText}>  
        Checked in
        </Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.secbuttonContainers}> 
        <Text style={styles.secbuttonText}>  
        Checked out
        </Text>
      </TouchableOpacity>
          </View>
          </View>

    );
  }
}
   const styles = StyleSheet.create({
      Container: {
       padding: 40,
      },

      buttonContainers: {
       backgroundColor: '#2c3e50',
       paddingVertical: 10,
       height: 200,
       marginTop: 70,
       borderRadius: 80

      },
      buttonText: {
        marginTop: 75,
        textAlign: 'center',
        fontWeight: '700',
        color: 'white',

        fontWeight: 'bold',
        fontSize: 30
      },

       secbuttonContainers: {
       backgroundColor: '#2c3e50',
       paddingVertical: 10,
       height: 200,
       marginTop: 70,
       borderRadius: 80

      },
      secbuttonText: {
        marginTop: 75,
        textAlign: 'center',
        fontWeight: '700',
        color: 'white',

        fontWeight: 'bold',
        fontSize: 30
      },

      backgroundView: {
        height: 700,

      backgroundColor: '#34495e'

      }

});

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import LoginForm from './LoginForm';

export default class App extends React.Component {
  render() {
    return (
      <LoginForm/>

    );
  }
}

https://i.stack.imgur.com/AFPTX.png

Answer 1

安装新软件包后尝试重新启动打包程序。

反应导航不起作用

1 个答案: