爲什麼我的佔位符不會顯示在TextInput中

我看不出爲什麼佔位符不會出現在<TextInput>的兩個位置上。另外，當用戶鍵入內容時，在<TextInput>框中沒有任何內容顯示。我想知道爲什麼會發生這種情況。爲什麼我的佔位符不會顯示在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 
    } 
});

這裏是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;

這裏是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. 
    } 

});`

來源

2017-06-21 van jok

三個問題，這一切都處理您的造型。

通過使用paddingBottom: 20和padding: 20，您可以有效減少什麼可以顯示在TextInput成棉條（如果即使這樣）。爲了彌補這一點，您還需要調整height。
當您調整height時，您可能會遇到this double height issue。我不知道是否已經解決了這個問題，但如果你仍然看到問題，請看看它。
最後，paddingHorizontal: 150將它向水平方向推得過大，沒有出現任何東西。把它縮小到像paddingHorizontal: 15這樣小得多的東西。

來源

2017-06-21 20:34:29

爲什麼我的佔位符不會顯示在TextInput中

回答

相關問題