React Native Textinput 超出父视图答案

【问题标题】：React Native Textinput growing beyond parent viewReact Native Textinput 超出父视图
【发布时间】：2021-12-25 23:02:16
【问题描述】：

我目前正在与我的 Textinput 进行斗争，以防止超出父视图。我当前的组件如下所示：

return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollContainer}>
        <View style={styles.inputContainer}>
          <TextInput style={styles.textInput}
          placeholder="Eigene erstellen"
          onChangeText={(text) => onChange(text)}
          maxLength= {35}/>
          <TouchableOpacity style={{alignSelf: "center"}}>
            <Icon name="arrow-right-circle-outline" color={color} size={30}/>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );

具有以下样式：

container: {
    flex: 1,
    backgroundColor: Colors[theme]['primary'],
  },
  scrollContainer:{
    paddingVertical: 25,
    paddingHorizontal: 20,
  },
  inputContainer:{
    flex: 1,
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "transparent",
    borderBottomWidth: 1,
    borderBottomColor: Colors.darkgrey,
  },
  textInput:{
    height: 40,
    fontSize: 18,
    color: Colors.white,
  },

问题在于，当 Textinput 中的文本太大时，它会将 Icon 推到“inputContainer”边框之外并不断增长，直到 Icon 到达整个屏幕的末尾。

但它应该看起来像这样（您可以通过底部边框看到 inputContainer 的预期大小）：

Example

我已经尝试了一些使用 flex 或将宽度设置为 100% 的方法，但没有任何效果。由于我对 React Native 有点陌生，我不知道该做什么了。

提前致谢

【问题讨论】：

标签： react-native flexbox react-component

【解决方案1】：

你可以给 textInput 赋予 flex 属性。

  textInput:{
    height: 40,
    fontSize: 18,
    color: Colors.white,
    flex: 1
  },

【讨论】：

【解决方案2】：

将 flex 属性赋予 textinput，它将被包含在父视图中

textInput:{
    flex : 1,
    height: 40,
    fontSize: 18,
    color: Colors.white,
}

【讨论】：