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消失的结果。

帮助，我不知道该怎么办，这就是为什么我要问一个新问题。

附注：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',
   }
});

完成！