以屏幕宽度百分比查看另一个视图

Question

我是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>

style.js

    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'

}

Answer 1

这是视图

的基本模板

使用Dimensions 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>
 )
}