Просмотр другого вида в процентах от ширины экрана - PullRequest
Новая
       16

Просмотр другого вида в процентах от ширины экрана

0 голосов
/ 06 сентября 2018

Я новичок в реакции на родную, и я хочу посмотреть как прикрепленное изображение. Понятия не имею, как можно этого добиться ..?

enter image description here

Я пробовал это:

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'

}

1 Ответ

0 голосов
/ 06 сентября 2018

Вот базовый шаблон для Вид

Получите ширину экранов, используя Размеры 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>
 )
}
...