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

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

这是 View

的基本模板

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

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

View over another view in percentage of screen width

percentage

react-native