Question

我正在编辑'.js'文件之一，并在做了一些更改后保存了工作，当我输入'rr'刷新模拟器上的应用程序时，我一直收到此消息。

Android应用程序模拟器不断停止应用程式资讯关闭应用程序

在创建 Form.js 之后，在Visual Studio代码编辑器中，在我项目的组件文件夹下，并将其导入到我的 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样式的微小变化也删除了字符串值 marginVertical：“ 10” 到 marginVertical：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---
  }
});

输出：-

Android应用程序模拟器不断在React Native上停止

1 个答案: