问题描述:

React native doesn't allow for zIndex and instead suggests layering views based on the order they're rendered in. I have a module on the top half of my screen and one on the bottom, I want the module on top to have a shadow that overlaps the bottom one. In order to achieve this I have to render the bottom half first. Easy enough with absolute positioning right?

My react styles:

topContainer: {

position: 'absolute',

top: 0,

left: 0,

right: 0,

height: 200,

backgroundColor: '#cccccc',

shadowColor: "#000000",

shadowRadius: 10,

shadowOpacity: 0.5,

shadowOffset: {

h: 0,

w: 0

},

},

bottomContainer: {

position: 'absolute',

top: 100,

left: 0,

right: 0,

bottom: 0,

backgroundColor: '#333'

}

My JSX:

<View>

<View style={styles.bottomContainer}>

<ContentView results={this.state.results} />

</View>

<View style={styles.topContainer}>

<SearchBar onSearch={this.onSearch} />

</View>

</View>

But when I do this, the bottomContainer doesn't fill the screen, it conforms to its content. But because of the variety of screen sizes I can't put a definite pixel size for the height and am therefore stuck.

网友答案:

If you add {flex: 1} to the outer <View>, then it should fill the screen, as well as the absolutely-positioned components within it.

网友答案:

You can use the elevation property, this is an android only feature and it can do what you want.

The property description:

elevation number

(Android-only) Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

Reference: https://facebook.github.io/react-native/docs/view.html

相关阅读:
Top