我如何能实现以下设计原生的反应

问题描述 投票:1回答:3

你可以有一个人帮助我实现低于设计我不是能达到相同的设计

enter image description here

波纹管是我的代码

<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
3个回答
0
投票
 <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代码无需额外的主要看法和立场希望它会帮助


2
投票

像这样的东西对你的作品?

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

0
投票

请检查链接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>
© www.soinside.com 2019 - 2024. All rights reserved.