Установка границы для реакции родного TextInput

Используя React native 0.26,

Мой компонент что-то вроде этого

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

И мои стили:

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

Проблемы, с которыми я сталкиваюсь

  1. Кажется, что ширина правой границы и ширина левой границы не оказывают никакого влияния, а текст-заполнитель только начинается с левого края.
  2. Фон TextInput "серый", так же, как и фон представления. Я ожидал, что он будет белым по умолчанию (кажется прозрачным).
  3. С симулятором iOS, как вызвать клавиатуру, я бы хотел установить returnKeyType и посмотреть, как выглядит клавиатура (и есть код на onSubmitEditing и проверить).

Снимок экрана ниже: Скриншот

Источник

2 ответа

Решение

1 Вы не можете объявить конкретную границу непосредственно в TextInput, если не включена многострочная (например, borderLeftWidth не будет работать, если multiline={true} включен, но borderWidth будет работать), но вы можете просто обернуть TextInput в View и дать ему границу.

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

2 Вам нужно объявить backgroundColor для TextInput.

3 Чтобы родная клавиатура появилась, вам нужно перейти в меню симулятора и отключить аппаратное обеспечение. Перейдите в Hardware -> Keyboard -> Connect Hardware Keyboard, выключите его.

Источник

По состоянию на react-native: 0.61.5 вы можете напрямую установить borderBottomWidthна TextInput. Как показано ниже, во встроенном стиле или, если хотите, в отдельном объекте стиля.

  style = {{borderBottomWidth : 1.0}}
Источник

По умолчанию boderWidth будет установлено на 0. Так что используйте borderWidth : 5 по умолчанию для (Сверху, Справа, Снизу, Слева).

Если вы хотите присвоить ширину индивидуально, у вас есть такие опции, как,

style = {{
borderStartWidth : 2
borderEndWidth : 3
borderTopWidth : 1
boderLeftWidth: 2
borderRightWidth: 3
borderBottomWidth : 4
}}
Источник

Чтобы установить текстовый ввод в центре, сделайте это:

alignSelf: 'center'
Источник
Другие вопросы по тегам