Реагировать на проблему создания собственных представлений? - PullRequest
Новая
       11

Реагировать на проблему создания собственных представлений?

0 голосов
/ 30 августа 2018

У меня два взгляда. ViewA имеет фиксированный размер (60 * 60), а оставшееся пространство предназначено для ViewB. Как я могу создать эти представления в React Native? Изображение ниже - это примерное представление, которое я хочу создать.

Просмотреть код, который я пробовал: 

<View style={{ width: '100%', height: 60, backgroundColor: 'green', flexDirection: 'row' }}> 
    <View style={{ backgroundColor: 'pink', flex: 2 }}/> 
    <View style={{ flex: 1, with: 60, height: 60, backgroundColor: 'purple', }}/>
</View>

enter image description here

Ответы [ 4 ]

0 голосов
/ 30 августа 2018

Попробуйте с помощью этого метода 

<View style={{flex:1}}>
        <View style={{ width: '100%', flex:1, height: 60, backgroundColor: 'green', flexDirection: 'row-reverse', paddingTop: 20 }}> 

            <View style={{ height: 60,width:60, backgroundColor: 'purple', }}/>
            <View style={{ height: 60,backgroundColor: 'pink', alignSelf:'stretch', flex:1 }}>

            </View> 
        </View>
      </View>

Проверьте это в https://snack.expo.io/@saravanansivalingam/top-padding

0 голосов
/ 30 августа 2018

Вы можете использовать flex для этой концепции 

<View style={{ flex:1, height: 60, backgroundColor: 'green', flexDirection: 'row' }}> 
    <View style={{ backgroundColor: 'pink', flex: 0.6 }}/> 
    <View style={{ flex: 0.4, backgroundColor: 'purple', }}/>
</View>
0 голосов
/ 30 августа 2018

Хорошо, это должно сработать. Импорт размеров из реактива-нативного. 

<View style={{ display: "flex", flexDirection: "row", flex: 1 }}>
        <View style={{ width: Dimensions.get("window").width - 60, backgroundColor: "pink" }}></View>
        <View style={{ width: 60, height: 60, backgroundColor: "purple" }}></View>
    </View>
0 голосов
/ 30 августа 2018

Добавьте немного отступов к вершине.

рабочая демоверсия: https://snack.expo.io/Syp9bUrDm

<View style={{ width: '100%', height: 60, backgroundColor: 'green', flexDirection: 'row', paddingTop: 20 }}> 
      <View style={{ backgroundColor: 'pink', flex: 2 }}/> 
      <View style={{ flex: 1, width: 60, height: 60, backgroundColor: 'purple', }}/>
</View>
...