React Native Textinput 超越父视图

Question

我目前正在与我的 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 中的文本太大时，它会将图标推到“inputContainer”边界之外并变大，直到图标到达整个屏幕的末端。

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

Example

我已经尝试过使用 flex 或将宽度设置为 100%，但没有任何效果。由于我是 React Native 的新手，所以我不知道该怎么做。

提前致谢

Answer 1

您可以将 flex 属性赋予 textInput。

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

Answer 2

将 flex prop 赋予 textinput，它将包含在父视图中

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

React Native Textinput 超越父视图

React Native Textinput growing beyond parent view

react-native

flexbox

react-component