ios - 为什么 zIndex 在 React Native 中不起作用？
<p><p>我一直在尝试在 <code>ScrollView</code> 上使用属性 <code>zIndex</code>，但它似乎不起作用。当我应用 <code>zIndex</code> 时，它看起来像这样:</p>
<p> <a href="/image/ZU8AA.png" rel="noreferrer noopener nofollow"><img src="/image/ZU8AA.png" alt="enter image description here"/></a> </p>
<p>如您所见，<code>ScrollView</code> 被输入阻止。当建议出现时，我希望 <code>ScrollView</code> 使用 <code>zIndex</code> 完全覆盖其他输入的效果。这是我现在拥有的:</p>
<pre><code><View>
<Input
value={this.state.inputValue}
style={styles._input}
inputStyle={styles._text}
onChangeText={this.handleChangeText}
{...this.props}
/>
<View style={styles._spacing}></View>
{predictions.length ?
<ScrollView
style={styles._scroll}
>
{predictions.map(this.renderPrediction)}
</ScrollView>
: null}
</View>
</code></pre>
<p>请注意，<code>Input</code> 是呈现特定 <code>TextInput</code> 的单独组件。此外，<code>this.renderPrediction</code> 返回:</p>
<pre><code><Text
style={styles._text}
key={index}
onPress={this.handlePredictionPress.bind(null, prediction.description)}
>
{prediction.description}
</Text>
</code></pre>
<p>最后是我的风格:</p>
<pre><code>const styles = EStyleSheet.create({
input: StyleSheet.flatten(),
text: {
fontSize: 15,
},
spacing: {
height: 10
},
scroll: {
position: "absolute",
zIndex: 10,
width: "80%",
top: 50,
backgroundColor: "white"
}
});
</code></pre>
<p>为什么我的 <code>zIndex</code> 尝试不工作，我怎样才能让它按需要工作？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>根据您的图像，看起来 <code>zIndex</code> 正在按预期工作，<code>ScrollView</code> 在输入上方。但是白色背景没有捕捉到。</p>
<p>使用 <code>contentContainerStyle</code> 作为项目背后的背景颜色。</p>
<pre><code><ScrollView style={styles._scroll} contentContainerStyle={styles._contentContainer} >
...
contentContainer: {backgroundColor: "white"}
</code></pre></p>
<p style="font-size: 20px;">关于ios - 为什么 zIndex 在 React Native 中不起作用？，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/43460916/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/43460916/
</a>
</p>
页:
[1]