2016-07-14 243 views
5

如何使用zIndex處理?React Native中的zIndex

我試圖指定從滾動視圖數量最多,但它仍然在底部(

沒有滾動型,它看起來像這樣,但我需要滑動到圖像。

謝謝

+0

zIndex的,爲了您將元件在確定其佈局順序。你可以嘗試使滾動視圖可見的溢出。 – Abhishek

+0

我相信zIndex僅支持iOS版本的最新版本。也許結帳在這裏的例子:https://github.com/facebook/react-native/commit/d64368b9e239b574039f4a6508bf2aeb0806121b –

+0

我不認爲這是一個Z索引的問題,而是頭像視圖被限制在界限它的父滾動視圖。看看你是否可以通過在滾動視圖中設置樣式來解決這個問題:'' –

回答

10

這在iOS的被實現爲0.30(見commit changes),並在0.31機器人(changes

我已經做了簡單的例子,組件,用於我已經如何使用它被:在反應本地不支持

'use-strict'; 

import React, { Component } from 'react'; 
const { View, StyleSheet } = require('react-native'); 

const styles = StyleSheet.create({ 
    wrapper: { 
     flex:1, 
    }, 
    back: { 
     width: 100, 
     height: 100, 
     backgroundColor: 'blue', 
     zIndex: 0 
    }, 
    front: { 
     position: 'absolute', 
     top:25, 
     left:25, 
     width: 50, 
     height:50, 
     backgroundColor: 'red', 
     zIndex: 1 
    } 
}); 

class Layers extends Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <View style={styles.wrapper}> 
       <View style={styles.back}></View> 
       <View style={styles.front}></View> 
      </View> 
     ); 
    } 
} 

module.exports = Layers; 
+2

因此,在您的示例中,如果您顛倒了加載「後」和「前」元素的順序,zIndex是否仍能正常播放?我只問現在你有他們加載回來,所以它會工作,無論zIndex,對不對? –

+0

你是正確的,如果你扭轉順序,他們仍然會在預期的Z指數。您可能會認爲外觀順序可能會改變分層,但View的工作方式與html Div非常相似,因爲它們不是作爲圖層在屏幕上繪製,而是從上到下堆疊 – Felipe