反应原生 flexbox 没有正确适应

Question

说明

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

在特定条件下，flex 布局似乎无法正确调整视图大小。 例如，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 中运行良好。