Question

我正在使用反应原生0.49，这是我想要实现的目标：

到目前为止，这就是我所做的：

render() {
   return (
      <View style={{flex: 1}}>
         <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
           <SearchHeader />                        // search input component
             <View style={{padding: 5}}>
               <TouchableOpacity style={{padding: 5}} onPress={this.btnPressed}>   // icon more
                   <Image source={require('../../assets/iconMore/iconMore.png')}/>
               </TouchableOpacity>
             </View>
          </View>
          <TabBarMain navigation={this.props.navigation}/>   // tab navigator

          {
            this.state.showView
            ?      
              <View style={popoverStyle}>
                <Text>View is showing</Text>
              </View>
            :
            null
          }
      </View>
    );
}

btnPressed = () => {
  this.setState({
    showView: !this.state.showView
  });
}

我试图在视图后面建立透明的背景，但我没有这样做。此外，该图标下方的三角形箭头指针（图标更多）。我不确定我的代码/组件结构是否正确，黑暗的布局是否应该在按下时忽略视图（在视图外按下）。

更新

我根据@sfratini的回答添加了一个视图。

showShadowLayer = () => {
    if (this.state.showView){
        return {
            position: 'absolute',
            top: 0, bottom: 0, left: 0, right: 0,
            backgroundColor: "rgb(0,0,0)",
            opacity: 0.5,
            zIndex: 1000
        }
    } else {
        return {
            flex: 1
        }
    }
}

render() {
    return (
        <View style={{flex: 1}}>
            <StatusBarView style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                <SearchHeader />
                <View style={{padding: 5}}>
                    <TouchableOpacity style={{padding: 5}} onPress={this.btnPressed}>
                        <Image
                            source={require('../../assets/iconMore/iconMore.png')}
                        />
                    </TouchableOpacity>
                </View>
            </StatusBarView>
            <TabBarMain navigation={this.props.navigation}/>
            <View style={this.showShadowLayer()}/>           // <-- added the partial transparent view here

            {
                this.state.showView
                ?
                    <View style={popoverStyle}>
                        <Text>View is showing</Text>
                    </View>  
                :
                null
            }
        </View>
    );
}


const popoverStyle = {         // style for the custom popover
    borderStyle: 'solid', 
    position: 'absolute', 
    backgroundColor: 'white', 
    borderColor: 'black', 
    elevation: 5,  
    height: SCREEN_HEIGHT,
    width: SCREEN_WIDTH - 40,
    alignSelf: 'flex-end',
    marginTop: 60,

    //for ios
    shadowColor: 'black',
    shadowOpacity: 0.3,
    shadowOffset: { width: 3, height: 3 },
    shadowRadius: 4,
}

但现在我无法与这种观点互动。如何在视线外按下时将其解除！

Answer 1

只需在抽屉后面添加“模态视图”即可。这样的事情应该做：

<View style={{
  position: 'absolute',
  top: 0, bottom: 0, left: 0, right: 0,
   backgroundColor: rgba(255,255,255,0.5)
}}/>

第4个值是不透明度

编辑：

在此处添加：

 <View style={this.showShadowLayer()}/>  // add here

{
  this.state.showView
  ?
   <View style={popoverStyle}>
     <Text>View is showing</Text>
   </View>
  :
   null
 }

RN通过检查您在渲染中添加视图的顺序来处理zIndex。

正如您在经过几次测试后看到的那样，渲染只能有一个父级，因此我将所有内容都包装在另一个视图中。

在本机中创建部分透明的背景布局

1 个答案: