美团界面
1、整体布局:
2、对各个部分布局:
3、由于这里的图片url是http,所以需要:
(1)在Info.plist中添加 NSAppTransportSecurity 类型 Dictionary ;
(2)在 NSAppTransportSecurity 下添加 NSAllowsArbitraryLoads 类型Boolean ,值设为 YES;
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
export default class MNAPP extends Component {
render() {
return (
<View style={styles.view_0}>
<View style={[styles.view_1, styles.row]}>
<View style={[{flex:1}, styles.border_right]}>
<View style={
{
flex:1}}>
<Text style={[styles.font18, styles.marTop27, styles.marLeft10, styles.green]}>我们约吧</Text>
<Text style={[styles.font16, styles.marTop14, styles.marLeft10]}>恋爱家人好朋友</Text>
</View>
<View style={
{
flex:1}}>
<Image style={[styles.yue]} source={
{
uri: 'http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png'}}></Image>
</View>
</View>
<View style={
{
flex:2}}>
<View style={[{flex:1}, {