Javascript React Native中InputText上不需要的字符

我是一个新的编程人员，我正在一个本地平台上从事一个项目。我正在制作一个带有电子邮件和密码字段的登录屏幕，但当我在手机上运行应用程序时，它会在电子邮件字段和密码字段上显示一个空格，如图所示。就在我的手机里吗？我能做什么？

import React, { Component } from 'react'
import {View, TextInput, Dimensions, StyleSheet} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'



const {width: WIDTH } = Dimensions.get('window')
 
export default class Example extends Component {
  render () {
    return (
    <View>
  
      <TextInput  style={styles.input} 
      placeholder={'Email'} 
      underlineColorAndroid='transparent'> </TextInput>
      
      <TextInput  
      style={styles.input2} 
      placeholder={'Password'} 
      underlineColorAndroid='transparent'
      secureTextEntry={true}> </TextInput>
    </View>



    );

  }
  
}

const styles = StyleSheet.create({
  input: {
    position: 'absolute', 
    top: 300, 
    width: WIDTH - 55,
    height: 45,
    borderRadius: 25,
    fontSize: 16,
    paddingLeft: 45,
    backgroundColor: '#dcdcdc',
    color: 'rgba(255,255,255,0.7)',
    marginHorizontal: 25,
  },
  input2: {
    position: 'absolute', 
    top: 450, 
    width: WIDTH - 55,
    height: 45,
    borderRadius: 25,
    fontSize: 16,
    paddingLeft: 45,
    backgroundColor: '#dcdcdc',
    color: 'rgba(255,255,255,0.7)',
    marginHorizontal: 25,
  },
  inputIcon: {
    position: 'absolute', 
    top: 304, left: 15,
  },
  
});

import React，{Component}来自“React”
从“react native”导入{View，TextInput，Dimensions，StyleSheet}
从“反应本机矢量图标/Ionicons”导入图标
const{width:width}=Dimensions.get（'window'）
导出默认类示例扩展组件{
渲染（）{
返回(
);
}
}
const styles=StyleSheet.create({
输入：{
位置：'绝对'，
排名：300，
宽度：宽度-55，
身高：45，
边界半径：25，
尺寸：16，
paddingLeft:45，
背景颜色：“#dcdc”，
颜色：“rgba（255255,0.7）”，
marginHorizontal:25，
},
输入2：{
位置：'绝对'，
排名：450，
宽度：宽度-55，
身高：45，
边界半径：25，
尺寸：16，
paddingLeft:45，
背景颜色：“#dcdc”，
颜色：“rgba（255255,0.7）”，
marginHorizontal:25，
},
inputIcon：{
位置：'绝对'，
上图：304左：15，
},
});

---

不，那不是你的电话错误。我的回答有助于你的理解。 你可以使用我的比你的更简单的代码

import React, { Component } from 'react'
import { View,
         TextInput, 
         Dimensions, 
         StyleSheet
} from 'react-native'
const screen_width=Dimensions.get('window').width;
export default class App extends Component {
  render() {
     return (
         <View style={styles.container}>
           <TextInput
             style={styles.input}
             placeholder={'Email'}
           underlineColorAndroid='transparent'>
           </TextInput>
           <TextInput
             style={styles.input}
             placeholder={'Password'}
            underlineColorAndroid='transparent'
             secureTextEntry={true}>
           </TextInput>
         </View>
        );
     }
 }
 const styles = StyleSheet.create({
   container: {
           flex: 1,
           justifyContent: 'center',
           alignItems: 'center',
   },
   input: {
          height: 45,
          borderRadius: 25,
          fontSize: 16,
          backgroundColor: '#dcdcdc',
          color: 'rgba(255,255,255,0.7)',
          width: screen_width * 0.75,
          paddingHorizontal: 20,
          marginTop:50,
   }
 });

import React，{Component}来自“React”
导入{视图，
文本输入，
尺寸，
样式表
}从“反应本机”
const screen_width=尺寸.get（'window'）.width；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
},
输入：{
身高：45，
边界半径：25，
尺寸：16，
背景颜色：“#dcdc”，
颜色：“rgba（255255,0.7）”，
宽度：屏幕宽度*0.75，
水平方向：20，
玛金托普：50，
}
});

如果你更需要我的帮助，欢迎随时光临。

---

祝你成功。

非常感谢！我感到沮丧。你能告诉我你用容器做什么吗？意思是样式。容器？如果是，让我解释一下。只是样式对象的对象类型值。