Android Application Emulator 一直在 React Native 上停止

Question

我正在编辑其中一个“.js”文件，在进行一些更改后保存我的工作后，当我在模拟器上键入“rr”以刷新应用程序时，我不断收到此消息。

Android 应用程序模拟器不断停止 应用信息 关闭应用

enter image description here

在 Visual Studio 代码编辑器中创建 Form.js 并在我的项目中的组件文件夹下并将其导入我的 Login.js 后，错误开始出现发生。 IDK 我做错了什么。我是 React Native 的新手，正在学习。

Form.js

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

export default class Login extends Component<{}> {
      render(){
          return(
              <View style={styles.container}>
                <TextInput style={styles.inputBox} 
                  underlineColorAndroid='rgba(0,0,0,0)' 
                  placeholder="Email"
                  placeholderTextColor = "#ffffff"
                   />
                <TextInput style={styles.inputBox} 
                  underlineColorAndroid='rgba(0,0,0,0)' 
                  placeholder="Password"
                  placeholderTextColor = "#ffffff"
                   />
                </View>
          )
      }
  }

const styles = StyleSheet.create({
container : {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center'
},
inputBox: {
  width:300,
  backgroundColor:'rgba(255,255,255,0.3)',
  borderRadius: 25,
  paddingHorizontal: 16,
  fontSize: 16,
  color:'#ffffff',
  marginVertical: '10'

}
});

Login.js

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

import Logo from '../components/Logo';
import Form from '../components/Form';

export default class Login extends Component<{}> {
render () {
return(
  <View style={styles.container}>
    <Logo/>  
    <Form/>      
  </View>
)
}
}

const styles = StyleSheet.create({
container : {
  backgroundColor: '#29b6f6',
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
}
});

Answer 1

这是您的解决方案
由于 TextInput 中的这个道具 underlineColorAndroid="rgba(0,0,0,0)" 以及 inputBox 样式的微小变化删除字符串值 ma​​rginVertical: "10"，您的应用程序崩溃了 到 ma​​rginVertical：10

Form.js

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

export default class Login extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.inputBox}
          // underlineColorAndroid="rgba(0,0,0,0)"<---Comment this code---
          placeholder="Email"
          placeholderTextColor="#ffffff"
        />
        <TextInput
          style={styles.inputBox}
          // underlineColorAndroid="rgba(0,0,0,0)"<---Comment this code---
          placeholder="Password"
          placeholderTextColor="#ffffff"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  inputBox: {
    width: 300,
    backgroundColor: "rgba(255,255,255,0.3)",
    borderRadius: 25,
    paddingHorizontal: 16,
    fontSize: 16,
    color: "#ffffff",
    marginVertical: 10 <-----Remove string to number---
  }
});

输出：--