React Native - 样式在多个设备上不一致

Question

我学习了 react native 并开始开发一个基本的支付应用程序。我正在使用 flex 在屏幕内排列元素。 Flex 布局在所有设备上都是一致的，但如果我将样式应用于 Flux 内的某些组件，则在不同设备之间是不一致的。

例如，我在 flex 内部的视图中添加了一个下拉组件（到期月份），并将顶部边距添加为 25 px。如果我在 Iphone 8 plus 中打开该应用程序，它会按预期显示，但如果我在 Iphone 8 中打开它，它会触摸它上面的组件（即使我尝试将单位更改为百分比而不是像素，但仍然是相同的行为）。我不确定为什么样式在多个设备上都没有响应，有人可以指导我如何使样式响应。

请看下面的截图和代码 sn-p 。谢谢！！！

iPhone 8 Plus

iPhone 8

元素的代码片段

    <View
  style={{
    flex: 0.1,
    flexDirection: "row",
  }}
>
  <RNPickerSelect
    items={CardExpiryMonth.getMonth()}
    style={{
      ...pickerSelectStyles1,

      placeholder: { color: "grey", fontSize: 15, fontFamily: myFont },
      iconContainer: {
        top: 35,
      },
    }}
    placeholder={{
      label: "Exp Month",
      color: "green",
    }}
    placeholderTextColor="red"
    useNativeAndroidPickerStyle={false}
    textInputProps={{ underlineColor: "yellow" }}
    Icon={() => {
      return <Ionicons name="md-arrow-down" size={24} color="gray" />;
    }}
  />
</View>

const pickerSelectStyles1 = StyleSheet.create({
inputIOS: {
fontSize: 16,
height: 50,
paddingVertical: 12,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: "gray",
borderRadius: 4,
color: "black",
paddingRight: 30, // to ensure the text is never behind the icon
width: 130,
top: 25,
left: 8 }

Answer 1

我认为最简单的方法是为您的父视图留出余量。所以代码是。

<View
  style={{
    marginTop: 25, // For only iOS (Platform.OS === 'ios') ? 25 : 0,
    flex: 0.1,
    flexDirection: "row",
  }}
>
  <RNPickerSelect
    // your code
  />
</View>

如果您想更改RNPickerSelect 的样式，那么您可以检查给定的示例here，您使用它是错误的，您将 inputIOS 放入类似于下面代码的样式中。

  <RNPickerSelect
    style={{ inputIOS: {...your style} }} // this is wrong
  />  

inputIOS 属性应该是 style 的直接属性。

还找到您使用top: 25, 为绝对位置提供margin top top 属性使用的另一件事。所以，请确认 RNPickerSelect 使用绝对位置，否则请使用marginTop: 25,。

如果您还有任何疑问，请告诉我。