React Native Paper - <TextInput> bug 还是我很蠢？

Question

问题出在 React-native-papers 和 TextInput 组件上。（也许是我缺乏 css/flexbox 知识）

当在树中 TextInput 上方的视图上使用alignItems: 'center' 时，TextInput 的渲染会不稳定。它占据了屏幕的整个高度，并且宽度非常窄。必须在具有alignItems: 'center' 的视图和TextInput 之间或在TextInput 本身的组件层次结构中指定css 宽度属性。

有一个 Github 问题已关闭。 https://github.com/callstack/react-native-paper/issues/2335

  return (
    <View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
      <TextInput label='Email' value='' /> 
      <TextInput label='Password' value='' />
    </View>
  );
}

可以使用此 Snack 重现问题。仅在设备上，在网络上看起来不错。 https://snack.expo.dev/@parriz/paper---weird-textinput-behaviour

完全相同的代码设置。但具有核心 React Native 组件。（按预期工作） https://snack.expo.dev/@parriz/default-react-native

完全相同的代码设置。但具有核心 React-native-element 组件。（按预期工作） https://snack.expo.dev/@parriz/great-donuts

我的问题：

• Flexbox 内的组件不应该根据需要增长以适应内容吗？（因此，这种行为是一个错误？）
• 如果有人以前使用过 Native Paper，你是如何处理这个问题的？您刚刚是否明确设置了所有 TextInput 的宽度？这是你平时的做法吗？
• 为什么网络上和设备上的结果如此不同？我认为结果在 React Native 和 React Native Web 上应该是相同的？

Answer 1

这可以通过以下方式解决：

container: {
    flex: 1,
    justifyContent: "center",
},

或者

 <View style={styles.container}>
      <View style={{ width: '100%' }}>
        <TextInput label="Email" value="" />
        <TextInput style={styles.textInput} label="Password" value="" />
      </View>
      <Button
        mode="contained"
        style={styles.textInput}
        onPress={() => alert('Clicked')}>
        Login
      </Button>
 </View>