Как я могу добиться дизайна ниже в React Native

Можете ли вы помочь мне достичь дизайна ниже, я не смогу добиться того же дизайна

ниже мой код

<View style = {{ position: 'absolute',  padding:8, borderColor: 'gray', borderWidth: 1, marginLeft: 30, width: '25%', top: 120, backgroundColor: 'transparent' }}>
    <Text>From</Text>
</View>

<View style = {{padding:10, borderColor: 'gray', borderWidth: 1, width: '95%', alignSelf: 'center', borderRadius: 7, marginTop: 25 }}>
   <Text>MAPLIN STORE</Text>
   <Text>12 Kwame Nkrumah Bvd</Text>
   <Text>Pune, INDIA</Text>
</View>

Спасибо

reactjs react-native

04.02.2019 05:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

113

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Что-то вроде этого работает для вас?

<View>
   <View style = {{padding:10, borderColor: 'gray', borderWidth: 1, width: '95%', alignSelf: 'center', borderRadius: 7, marginTop: 25 }}>
       <View style = {{ position: 'relative',  padding:8, borderColor: 'gray', borderWidth: 1, marginLeft: 20, width: '25%',                 backgroundColor: 'white',bottom: 33}}>
           <Text>From</Text>
       </View>
   <Text>MAPLIN STORE</Text>
   <Text>12 Kwame Nkrumah Bvd</Text>
   <Text>Pune, INDIA</Text>
   </View>
 </View>

04.02.2019 05:50

Пожалуйста, проверьте ссылку https://snack.expo.io/B1inoHHVV, вы уже получили ответ, возможно, он также поможет вам

<View style = {{flex:1,justifyContent:'center'}}>
 <View style = {{padding:10,margin:5,borderColor:'black',borderWidth:2}}>
  <View style= 
   {{borderColor:'black',
    borderWidth:1,width:120,
    bottom:30,
    backgroundColor:'white'}}>
    <Button title = "From"/>
     </View>
  <View style = {{margin:10}}> 
   <Text style = {{fontWeight: 'bold'}}>MAPLIN STORE</Text>
   <Text style = {{fontWeight: 'bold'}}>12 Kwame Nkrumah Bvd</Text>
   <Text style = {{fontWeight: 'bold'}}>PUNE INDIA</Text>
  </View>
  </View>
 </View>

я ценю ваш ответ :)

— 04.02.2019 06:53

04.02.2019 06:26

Ответ принят как подходящий

 <View style = {{padding:10, borderColor: 'gray', borderWidth: 1, width: '95%', alignSelf: 'center', borderRadius: 7, marginTop: 25 }}>
       <View style = {{ padding: 8, borderColor: 'gray', borderWidth: 1, marginLeft: 20, width: '25%', backgroundColor: 'white',bottom: 33}}>
           <Text>From</Text>
       </View>
   <Text>MAPLIN STORE</Text>
   <Text>12 Kwame Nkrumah Bvd</Text>
   <Text>Pune, INDIA</Text>
 </View>

попробуйте этот код, это просто, и код nit не требует дополнительного основного вида и положения надеюсь, это поможет

04.02.2019 07:29