ios - react 原生 flexbox 没有正确适应
<p><h3>说明</h3>
<p>我正在开发一个带有三列键盘的 reactnative 应用程序。我的键盘基于垂直弹性布局。键盘中的每一行都配置了水平弹性布局。按钮和水平和垂直分隔符是简单的 View 。 </p>
<p>在特定条件下，flex 布局似乎无法正确调整 View 大小。
例如，iPhone 6 屏幕尺寸见下图:三个按钮的宽度均相同，均为 123.5，第二列和第三列之间有 0.5 的空白区域清晰可见。</p>
<p> <a href="/image/0TPit.png" rel="noreferrer noopener nofollow"><img src="/image/0TPit.png" alt="enter image description here"/></a> </p>
<p>你们对为什么会发生这种情况有任何假设吗？</p>
<h3>复制</h3>
<p>我在这里放了一些示例代码:<a href="https://rnplay.org/apps/Vl7nVg" rel="noreferrer noopener nofollow">https://rnplay.org/apps/Vl7nVg</a>
然而，在这个例子中，问题似乎没有出现，但它使用了 react v0.31。</p>
<p>尝试使用 v0.35 在本地运行示例会导致问题。</p>
<h3>附加信息</h3>
<ul>
<li>React Native 版本:0.35</li>
<li>平台:iOS</li>
<li>操作系统:MacOS</li>
</ul></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>删除每一行的最后一行verticalLine样式。</p>
<pre><code><View style={styles.verticalLine}/>
</code></pre>
<p>目前你的每一行都是这样的。</p>
<pre><code><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>
</code></pre>
<p>去掉后就变成了，</p>
<pre><code><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>
</code></pre>
<p>此更改删除了多余的空格。</p>
<p>注意:
不知道为什么这条线会导致问题。 react-native 0.35.0 iOS 实现可能存在一些问题。您的代码在 Android 中运行良好。</p></p>
<p style="font-size: 20px;">关于ios -react 原生 flexbox 没有正确适应，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/40250867/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/40250867/
</a>
</p>
页:
[1]