我如何在React Native中实现以下设计

Question

您能帮我实现以下设计吗，我无法实现相同的设计

贝洛是我的代码

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

谢谢

Answer 1

类似的东西对您有用吗？

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

Answer 2

请检查链接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>

Answer 3

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

尝试此代码，它很简单，而且不需要额外的主视图和位置 希望会有所帮助