React native flexbox无法正确调整

Question

描述

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

在特定情况下，似乎flex布局无法正确调整视图大小。 例如，请参阅下面的图片了解iPhone 6屏幕尺寸：三个按钮的大小均相同，宽度为123.5，第二列和第三列之间清晰可见0.5个空白区域。

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

生殖

我在这里放了一些示例代码：https://rnplay.org/apps/Vl7nVg 在这个例子中，问题似乎没有出现，但它使用react v0.31。

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

其他信息

• React Native version：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中运行良好。