Question

我搜索了很多，但我确实发现如何在反应原生中给z-index属性，如果我在反应原生中使用zIndex它显示我错误，这不是有效的样式道具类型。

这是我的渲染代码。正如你在下面看到的那样，我想让autoContainer视图可见。所以请告诉我如何在不使用任何第三方库的情况下使其成为现实。

render() {
    return (
      <View style={{flex:1}}>
      <View style={[styles.inputWrap,this.props.error]}>
       <TextInput
          style={[style.input,this.props.style]}
          ref={this.props.name}
          onChangeText={(text) =>this.searchItem(this.props.options,text)} 
          value={this.state.value}
          placeholder={this.props.placeholder}
          placeholderTextColor="#000000"
          keyboardType={this.props.keyboard}
          />
        </View>
         {this.toggleAuto()}
      </View>
    )
}
 toggleAuto()
  {
    if(this.state.autoList!='')
      {
     return (<View style={style.autoContainer}>
             {this.renderList(this.state.autoList)}
             </View>
       );
      }
  }
const style = StyleSheet.create({
   input:{
    flex:1,
    height:50,
    fontSize:16,
    backgroundColor:'#ffffff',
    paddingLeft:10,
  },
   autoContainer: {
    borderTopColor:"#888888",
    borderTopWidth:1,
    position:"absolute",
    right:0,
    left:0
  },
  list: {
    backgroundColor:'#f2f2f2',
    padding:10,
    borderColor:'#888888',
    borderBottomWidth:1,
    borderLeftWidth:1,
    borderRightWidth:1
  }
});

Answer 1

更新回答：zIndex现在可以在ReactNative中使用。

您是否尝试过elevation样式属性？

autoContainer: {
    ...,
    elevation: 3,
}

查看以下链接：

Answer 2

您使用的是哪个RN版本？
当前版本0.45支持Android和iOS的zIndex 从版本0.30开始支持zIndex，在此处进行检查：https://github.com/facebook/react-native/commit/3d3b067f6fc831b6b23726087fe39cf39ef86f00

如何在响应原生android app

2 个答案: