React native 以屏幕宽度的百分比显示在另一视图上的视图

我是react native的新手，我想要一个像附加图像一样的视图。我不知道怎样才能做到这一点

我试过这个：

app.js

            <View style={styles.navSectionStyle}>

              <TouchableOpacity
                  style={styles.SubmitButtonStyle}
                  activeOpacity = { .5 }
                  onPress={ this.ButtonClickCheckFunction }>

               <Text style={styles.TextStyle}> Page 1 </Text>

             </TouchableOpacity>

                <View style={styles.BackStyle}>

                <Text style={styles.TextStyle}> Test</Text>

                </View>

            </View>

    SubmitButtonStyle: {

        width:'70%', 
        height: 80 ,
        justifyContent: 'center', 
        alignItems: 'center',

        paddingTop:15,
        paddingBottom:15,

        backgroundColor:'#fff',
        borderRadius:10,
        borderWidth: 2,
        borderColor: '#fff'
      },

      BackStyle:{
      marginTop:10,
      marginLeft:15,
      position: 'absolute',
      width: 30,
      borderRadius:10,
      borderWidth: 1,
      borderColor: '#F53BBB',
      backgroundColor: '#F53BBB',
      justifyContent: 'center', 
      alignItems: 'center',
      shadowColor: '#000000',
        shadowOffset: {
          width: 2,
          height: 3
        },
        shadowRadius: 4,
        shadowOpacity: 1.0
      },

      TextStyle:{
      justifyContent: 'center', 
      alignItems: 'center'

}

---

以下是视图的基本模板

使用api获取屏幕的宽度

将视图标记为

position:absolute

，并根据屏幕宽度对其进行定位

15%

从两侧，

10%

用于重叠视图，

60%

用于主视图

render() {
return (
 <View style={{flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: 'red'}}>
   <View style={{width: Dimensions.get('window').width * 0.6,
                 height: 100,
                 backgroundColor: 'blue'}}/>
   <View style={{position: 'absolute',
                 width: Dimensions.get('window').width * 0.1,
                 height: 80,
                 backgroundColor: 'black',
                 left: Dimensions.get('window').width * 0.15,
                 zIndex: 1}} />
   <View style={{position: 'absolute',
                 width: Dimensions.get('window').width * 0.1,
                 height: 80,
                 backgroundColor: 'black', 
                 right:  Dimensions.get('window').width * 0.15,
                 zIndex: 1}} />
 </View>
 )
}

render（）{
返回(
)
}

上面的视图在createStackNavigator抽屉中创建并使用（Dimensions.get（'window'）.width）我可以获得总屏幕宽度，但如何获得或设置createStackNavigator抽屉宽度自定义..？默认抽屉宽度为

screenWidth-headerWidth

等于

Dimensions.get（'window'）.width-（Platform.OS=='android'？56:64）

，因此您需要对抽屉的此宽度执行操作。如果提供了自定义的

抽屉宽度

，则需要对该宽度执行操作。