React Native Paper - <TextInput> 有问题还是我太蠢了？

Question

问题出在React Native Papers和TextInput组件上。(也许是我对CSS / flexbox的知识缺乏)

当在TextInput上面的View中使用alignItems：'center'时，TextInput的渲染会出现问题。 它会占据整个屏幕的高度并且非常狭窄。 在具有alignItems：'center'的View和TextInput之间的组件层次结构中必须指定一个CSS宽度属性，或者在TextInput本身上指定宽度属性。

已经关闭了一个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 元素组件（按预期工作）。 https://snack.expo.dev/@parriz/great-donuts

我的问题：

• 不是放在弹性盒子里的组件应该随着内容自动增长吗？（因此，这种行为是一个 bug 吗？）
• 如果有人以前用过 native-papers，您是如何处理此问题的？您只是明确地在所有 TextInput 上设置宽度吗？这是您通常的做法吗？
• 为什么在网页和设备上的结果会如此不同？我认为 React Native 和 React Native Web 的结果应该是等效的？

- Rzll

---

你能找到任何解决方案吗 :( - undefined

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>

- talhamaqsood890