impostazione di un bordo per reagire nativo TextInput

Question

Utilizzo Reagire nativo 0,26,

La mia componente è qualcosa di simile

const Search =() => { 
    return (
     <View style={styles.backgroundImage}> 
     <TextInput style={styles.textInput} onChangeText={(text) => console.log(text)} placeholder={"Enter Search Term"}/> 
     </View> 
    ) 
} 

E i miei stili:

const styles = StyleSheet.create({ 
    backgroundImage: { 
    flex : 1, 
    flexDirection: "column", 
    justifyContent: 'center', 
    alignItems: 'center' 
    }, 
    textInput: { 
    justifyContent: "center", 
    alignItems: "stretch", 
    borderRightWidth: 30, 
    borderLeftWidth: 30, 
    height: 50, 
    borderColor: "#FFFFFF", 
    } 
}) 

I problemi che sto affrontando sono

1. Il bordo destro larghezza e le ft width non sembra avere alcun effetto e il testo segnaposto inizia appena sul bordo sinistro.
2. Lo sfondo di TextInput è "grigio" come lo sfondo della vista. Mi aspettavo che fosse bianco per impostazione predefinita (si sente trasparente).
3. Con il simulatore iOS come richiamare la tastiera, vorrei impostare returnKeyType e vedere come appare la tastiera (e avere un codice su onSubmitEditing e testare).

screenshot qui sotto:

Answer 1

1 Non è possibile dichiarare un bordo specifica direttamente sul TextInput a meno multilinea è abilitato (ad esempio borderLeftWidth non funzionerà a meno che multiline={true} è abilitato ma borderWidth funziona), ma è possibile basta avvolgere TextInput in una vista e assegnargli un bordo.

inputContainer: { 
    borderLeftWidth: 4, 
    borderRightWidth: 4, 
    height: 70 
}, 
input: { 
    height: 70, 
    backgroundColor: '#ffffff', 
    paddingLeft: 15, 
    paddingRight: 15 
} 

2 è necessario dichiarare un backgroundColor per il TextInput.

3 Per visualizzare la tastiera nativa, è necessario accedere al menu del simulatore e scollegare l'hardware. Vai su Hardware -> Tastiera -> Connetti tastiera hardware, disattivala.