Javascript 为什么赢了'；我的占位符不会显示在TextInput中

我不明白为什么占位符不会出现在两个

上。此外，当用户键入内容时，这些

框中不会显示任何内容。我想知道为什么会发生这种情况

下面是App.js的

import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';

export default class App extends Component {
    render() {
        return(
            <View style={styles.back}>
                <BackGround/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    back: {
        flex: 1
    }
});

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

class Login extends Component {
    render() {
        return(
            <View>
                <TextInput
                    placeholder={"Email"}
                    placeholderTextColor={"#E365F4"}
                    style={styles.input}
                />

                <TextInput
                    placeholder={"Password"}
                    placeholderTextColor={"#f44242"}
                    style={styles.input}
                />

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

                <TouchableOpacity>
                    <Text style={styles.loginAndCA}>Create Account</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    input: {
        backgroundColor: 'green',
        paddingBottom: 20,
        padding: 20,
        paddingHorizontal: 150,
        marginBottom: 10
    },

    loginAndCA: {
        fontSize: 40,
        textAlign: 'center',
        color: 'white',
        fontFamily: 'Bodoni 72 Smallcaps'
    }
});

export default Login;

import React, {Component} from 'react';
import {StyleSheet, Image, View} from 'react-native';
import Login from './Login';

export default class BackGround extends Component {
    render() {
        return(
            <View style={styles.first}>
                <Image style={styles.container} source={require('../pictures/smoke.jpg')}>
                    <View style={styles.second}>
                        <Login/>
                    </View>
                </Image>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: null,
        height: null,
        backgroundColor: 'rgba(0,0,0,0)',
        resizeMode: 'cover'
        // resizeMode: 'contain' // Shows image completely.
    },

    first: {
        flex: 1
    },

    second: {
       paddingTop: 290 // Moves both <TextInput> boxes down.
    }

});`

下面是
BackGround.js
：

import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';

export default class App extends Component {
    render() {
        return(
            <View style={styles.back}>
                <BackGround/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    back: {
        flex: 1
    }
});

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

class Login extends Component {
    render() {
        return(
            <View>
                <TextInput
                    placeholder={"Email"}
                    placeholderTextColor={"#E365F4"}
                    style={styles.input}
                />

                <TextInput
                    placeholder={"Password"}
                    placeholderTextColor={"#f44242"}
                    style={styles.input}
                />

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

                <TouchableOpacity>
                    <Text style={styles.loginAndCA}>Create Account</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    input: {
        backgroundColor: 'green',
        paddingBottom: 20,
        padding: 20,
        paddingHorizontal: 150,
        marginBottom: 10
    },

    loginAndCA: {
        fontSize: 40,
        textAlign: 'center',
        color: 'white',
        fontFamily: 'Bodoni 72 Smallcaps'
    }
});

export default Login;

import React, {Component} from 'react';
import {StyleSheet, Image, View} from 'react-native';
import Login from './Login';

export default class BackGround extends Component {
    render() {
        return(
            <View style={styles.first}>
                <Image style={styles.container} source={require('../pictures/smoke.jpg')}>
                    <View style={styles.second}>
                        <Login/>
                    </View>
                </Image>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: null,
        height: null,
        backgroundColor: 'rgba(0,0,0,0)',
        resizeMode: 'cover'
        // resizeMode: 'contain' // Shows image completely.
    },

    first: {
        flex: 1
    },

    second: {
       paddingTop: 290 // Moves both <TextInput> boxes down.
    }

});`

import React，{Component}来自'React'；
从“react native”导入{样式表、图像、视图}；
从“./Login”导入登录名；
导出默认类后台扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
宽度：空，
高度：空，
背景颜色：“rgba（0,0,0,0）”，
resizeMode:“封面”
//resizeMode:'contain'//完全显示图像。
},
第一:{
弹性：1
},
第二：{
paddingTop:290//向下移动两个框。
}
});`
这里有三个问题，它们都与您的造型有关

通过使用
paddingBottom:20
和
padding:20
，您可以有效地将
TextInput
中显示的内容缩减为一小块（即使如此）。为了补偿这一点，您还需要调整高度
当您调整高度时，您可能会遇到以下情况：。我不知道这是否已经被修复，但是如果你仍然看到问题，请看一看
最后，
paddingHorizontal:150
将其水平推得太远，使其不显示任何内容。将其减小到更小的值，如
水平方向：15