ios - React native flexbox 无法正确适应

Question

描述

我正在开发一个带有三列键盘的 React Native 应用程序。我将键盘基于垂直弹性布局。键盘中的每一行都配置有水平弹性布局。按钮和水平和垂直分隔符是简单的 View 。

在特定情况下，弹性布局似乎无法正确调整 View 大小。例如下图 iPhone 6 的屏幕尺寸:三个按钮的宽度都是 123.5 等宽，第二列和第三列之间有 0.5 的空白空间清晰可见。

你们有什么关于为什么会发生这种情况的假设吗？

复制

我在这里放了一些示例代码:https://rnplay.org/apps/Vl7nVg然而，在此示例中，问题似乎并未出现，但它使用了 React v0.31。

尝试使用 v0.35 在本地运行示例会导致问题。

附加信息

• React Native 版本:0.35
• 平台:iOS
• 操作系统:MacOS

Answer 1

从每行中删除最后一行 verticalLine 样式。

<View style={styles.verticalLine}/>

目前你的每一行都是这样的

<View style={styles.row}>
    <View style={styles.verticalLine}/>
    <View style={styles.button}>
        <Text style={styles.buttonText}>1</Text>
    </View>
    <View style={styles.verticalLine}/>
    <View style={styles.button}>
        <Text style={styles.buttonText}>2</Text>
    </View>
    <View style={styles.verticalLine}/>
    <View style={styles.button}>
        <Text style={styles.buttonText}>3</Text>
    </View>
    <View style={styles.verticalLine}/>
</View>

去掉之后就变成了，

<View style={styles.row}>
    <View style={styles.verticalLine}/>
    <View style={styles.button}>
        <Text style={styles.buttonText}>1</Text>
    </View>
    <View style={styles.verticalLine}/>
    <View style={styles.button}>
        <Text style={styles.buttonText}>2</Text>
    </View>
    <View style={styles.verticalLine}/>
    <View style={styles.button}>
        <Text style={styles.buttonText}>3</Text>
    </View>
</View>

此更改删除了额外的空格。

注意:不知道为什么这条线会导致问题。可能是 react-native 0.35.0 iOS 实现的一些问题。您的代码在 Android 中运行良好。