Warum wird mein Platzhalter nicht in TextInput angezeigt

Question

Ich kann nicht sehen, warum der Platzhalter nicht auf beiden <TextInput> angezeigt wird. Wenn der Benutzer etwas eingibt, wird in den Feldern <TextInput> nichts angezeigt. Ich würde gerne wissen, warum das passiert.

Hier ist 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 
    } 
}); 

Hier ist Login.js:

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; 

Hier ist BackGround.js:

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. 
    } 

});` 

Answer 1

Drei Fragen hier und es ist alles mit Ihrem Styling zu tun.

1. Durch die Verwendung von paddingBottom: 20 und padding: 20, reduzieren Sie effektiv, was in den TextInput zu einem Faserband gezeigt werden kann (auch wenn diese). Um dies zu kompensieren, müssen Sie auch die height anpassen. Wenn Sie height anpassen, können Sie auf this double height issue stoßen. Ich weiß nicht, ob das seither behoben wurde, aber sieh es dir an, wenn du immer noch Probleme siehst.
2. Schließlich, paddingHorizontal: 150 schiebt es zu weit horizontal, so dass nichts erscheint. Reduziere das auf etwas viel kleineres wie paddingHorizontal: 15.