ReactNative TextInput не отображается iOS

У меня есть следующий результат снятого рендеринга:

return (
  <View style={{backgroundColor:'red'}}>
    <TextInput value={'Hello'}/>
  </View>
);

Сгенерированный TextInput не отображается в iOS, если я не укажу высоту и при использовании flexDirection: 'row' в своем контейнере, мне также нужно указать его ширину.

Это происходит только с iOS, Android, похоже, работает так, как ожидалось.

Есть ли способ отображения TextInput в iOS без фиксированного размера?

Текущие зависимости:

  "dependencies": {
    "react-native": "=0.18.1",
    "react-native-orientation": "=1.12.2",
    "react-native-vector-icons": "=1.1.0"
  },

iOS:

Android:

Измените рендеринг следующим образом:

return (
  <View style={{backgroundColor:'red'}}>
    <Text>text</Text>
    <TextInput value={'Hello'}/>
  </View>
);

имеет следующий результат:

IOS:

Android:

Ответы

Ответ 1

Вам нужно определить высоту для textInput. Попробуйте:

return (
  <View style={{backgroundColor:'red'}}>
    <Text>text</Text>
    <TextInput style={{ backgroundColor: '#ededed', height: 60 }} value={'Hello'}/>
  </View>
);

Или, если вы не хотите определять высоту в TextInput, вы можете определить высоту на содержащем представлении и flex: 1 в TextInput:

<View style={{ height:60 }}>
    <TextInput style={{ flex:1, backgroundColor: '#ededed' }} />
</View>

Ответ 2

Столкнулась с той же проблемой, но была отображена, когда я удалил alignItems:'center' из верхнего родительского представления в функции render().