Оболочка Flex позволяет визуализировать TextInput вне его родителя.

Question

Я пытаюсь создать простую панель поиска с закругленными углами и пиктограммой слева, но когда я пытаюсь использовать flexbox, все выходит из-под контроля.

Вот что я получаю:

И это мой текущий код:

<ElevatedView style={[styles.searchBar, style]} elevation={elevation}>
   <View style={{ marginLeft: -10, marginRight: 10 }}>
      <Icon.Ionicons
         name="menu"
         size={26}
         style={{ height: 60 }}
         color="#54BCAE"
      />
   </View>
   <View style={{ flex: 1, height: 60 }}><TextInput {...rest} /></View>
</ElevatedView>

И таблицы стилей

const styles = StyleSheet.create({
   searchBar: {
      marginTop: 65,
      marginBottom: 35,
      marginHorizontal: 20,
      borderRadius: 100,
      paddingHorizontal: 25,
      paddingVertical: 15,
      backgroundColor: '#fff',
      flex: 1,
      flexDirection: 'row',
   }
});

Я пробовал буквальноВСЕ.Я рассмотрел все подобные (а в некоторых случаях даже идентичные) вопросы здесь, в stackoverflow, github, но ничего не работает.Я пытался установить flexWrap: 'wrap' для всех, я пытался установить высоту (как указано в моем коде выше) и ширину для textInpu, но ничего не работает вообще.

Я такжечасто получают результат, когда TextInput просто исчезает.

Помогите, я не знаю, что делать дальше, поэтому я задаю новый вопрос.

Ps .: flexDirection: 'row' это не причина.

Answer 1

Я решил это!

Ну, причина, по которой все ломалось, в том, что я применял flex: 1 к контейнеру, поэтому решение состоит в том, чтобы удалить его:

const styles = StyleSheet.create({
   searchBar: {
      marginTop: 65,
      marginBottom: 35,
      marginHorizontal: 20,
      borderRadius: 100,
      paddingHorizontal: 25,
      paddingVertical: 15,
      backgroundColor: '#fff',
      flexDirection: 'row',
   }
});

Готово!