web-dev-qa-db-de.com

Rahmen für reaktives TextInput setzen

React native 0.26 verwenden,

Meine Komponente ist so etwas

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

Und meine Styles: 

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",
  }
})

Die Probleme, mit denen ich konfrontiert bin, sind

  1. Die Breite des rechten Rands und die linke Breite scheinen keine Wirkung zu haben, und der Platzhaltertext beginnt nur am linken Rand.
  2. Der Hintergrund von TextInput ist "grau" und entspricht dem Hintergrund der Ansicht. Ich hatte erwartet, dass es standardmäßig weiß ist (fühlt sich transparent an).
  3. Mit dem iOS-Simulator zum Aufrufen der Tastatur möchte ich returnKeyType einstellen und sehen, wie die Tastatur aussieht (und etwas Code in onSubmitEditing und test).

Screenshot unten:  Screenshot

1 Sie können einen bestimmten Rahmen nicht direkt in TextInput deklarieren, wenn Multiline nicht aktiviert ist (z. B. funktioniert borderLeftWidth nur, wenn multiline={true} aktiviert ist, aber borderWidth). Sie können den TextInput jedoch einfach in eine View einbetten und ihm einen Rahmen geben.

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

2 Sie müssen eine backgroundColor für den TextInput angeben.

3 Damit die native Tastatur angezeigt wird, müssen Sie das Simulatormenü öffnen und die Hardware trennen. Gehen Sie zu Hardware -> Tastatur -> Hardware-Tastatur verbinden, schalten Sie sie aus.

20
Nader Dabit

um den Textinput in der Mitte einzustellen, gehen Sie folgendermaßen vor:

alignSelf: 'center'