Flex 包装器使 TextInput 在其父级之外呈现答案

【问题标题】：Flex wrapper makes TextInput be rendered outside it's parentFlex 包装器使 TextInput 在其父级之外呈现
【发布时间】：2019-03-02 17:26:27
【问题描述】：

我正在尝试制作一个带有圆角和左侧图标的简单搜索栏，但是当我尝试使用 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' 不是原因。

【问题讨论】：

标签： javascript css react-native flexbox

【解决方案1】：

我已经解决了！

好吧，一切都坏了的原因是我将flex: 1应用于容器，所以解决方案是删除它：

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

完成！

【讨论】：