私が使用しているネイティブ

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 
    }); 
} 

私はビューの背後に透明な背景を作ろうとしていますが、私はそうしていません。また、アイコンのすぐ下にある三角形の矢印ポインタ（アイコンをもっと表示）。私のコード/コンポーネントの構造が正しいかどうか確かではありません。また、暗いレイアウトは、（ビューの外側を押すと）押されたときにビューを閉じると思われます。

UPDATE

私は@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) 
}}/> 

第四値は不透明にある

編集：

ここの後にそれを追加します。

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

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

RNは、どの順序で確認することでのZIndexを処理しますレンダリングでビューを追加します。

いくつかのテストの後で見たように、レンダリングには親が1つしかないので、すべてを別のビューにラップしています。