React-native Getting Started Guide (iv)--react-native layout combat

React-native Getting Started Guide github:https://github.com/vczero/react-native-lession

React-native: Develop your native app with JavaScript, unleash the Native UI experience and experience hybird development efficiency.

The articles written in the last one weeks are as follows:

• 1th article Hello React-native
• 2nd. Understanding Code Structure
• 3rd article css and layout
• The 4th Chapter react-native the layout of learning
• 5th Chapter UI Components

There are several needs this week to complete (this piece will be updated at all times):

• 6th article JSX Syntax
• 7th Self-write component
• The 8th chapter of modular Development
• 10th Building Project Structure
• The 11th Article source analysis

4th article react-native Layout Combat

Seniors taught us that the fastest way to master a new technology is to practice. Therefore, I found a more loving, heating interface. Of course, I did n’t advertise Meituan, but I thought the page was quite fresh. The following is the effect to be displayed:
The third article basically has a general understanding of the layout of React-Native. Let's start construction now. In general, the page is divided into three parts: (1) Let ’s date and the 3 columns on the right; (2) 1 yuan for the big meal and the 4 columns under it; (3) The three columns in the red fire.
First, realize the first part
1. First, we create a project
Now we need to create a React-Native project, so we can follow the steps below:
Open the terminal and start the journey of React-Native development.
(1) Install the command line tool (no need to install it if it is already installed): sudo npm install -g react-native-cli
(2) Create an empty project: react-native init HelloWorld
(3) Find the created HelloWorld project, double-click HelloWorld.xcodeproj to open the project in xcode. xcodeproj is a project file of xcode.
(4) In xcode, use the shortcut key cmd + R to start the project.

2. Remove the remaining redundant code, the remaining code is as follows:
/ **
* Sample React Native App
* https://github.com/facebook/react-native
* /
‘Use strict’;

var React = require (‘react-native’);
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;


var HelloWorld = React.createClass ({
    render: function () {
        return (
            <View> </ View>
        );
    }
});
var styles = StyleSheet.create ({

});


AppRegistry.registerComponent (‘HelloWorld’, () => HelloWorld);

3. At this time, except for the splash screen, you should see a blank page. Start and analyze the page:
(1) There are roughly 4 plates
(2) The first two columns (1/3 and 2/3); the next two columns (1/2). We first use the View component layout.
4. Complete the preliminary layout
Looking at the following code, it should be clear that the two columns are embedded in the View.
The effect is as follows:
5. Add internal pictures and text
In fact, there are still many details in this layout. The rough effect is as follows. This code is temporarily not posted, and it is posted together at the end:
Second, according to the first part of the principle, complete the entire page
The completed effect is as follows:
The entire code is as follows:
/ **
* Sample React Native App
* https://github.com/facebook/react-native
* /
‘Use strict’;

var React = require (‘react-native’);
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
} = React;


var HelloWorld = React.createClass ({
    render: function () {
        return (
            <View style = {{}}>
                <View style = {[styles.height160, styles.row,]}>
                <View style = {[styles.height160, styles.part_1_left,]}>
                <Text style = {[styles.font14, styles.marTop18, styles.marLeft10, styles.green]}> Let ’s make an appointment </ Text>
                <Text style = {[styles.font10, styles.marTop14, styles.marLeft10]}> Love family and friends </ Text>
                <Image style = {[styles.yue]} source = {{uri: ‘http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png‘}}> </ Image>
            </ View>
            <View style = {[styles.height160, styles.part_1_right,]}>
            <View style = {[styles.row, {flex: 1}]}>
            <View style = {{flex: 1}}>
              <Text style = {[styles.font14, {marginLeft: 30}, styles.red]}> Ultra-low value </ Text>
              <Text style = {[styles.font14, {fontSize: 12, marginTop: 14, marginLeft: 30, color: ‘black‘}]}> Shiyuanhui life </ Text>
            </ View>
            <View style = {[{flex: 1}, {marginTop: -13}]}>
              <Image style = {[styles.hanbao]} source = {{uri: ‘http://p0.meituan.net/mmc/a06d0c5c0a972e784345b2d648b034ec9710.jpg‘}}> </ Image>
            </ View>
          </ View>
          <View style = {[{flex: 1, flexDirection: ‘row‘, borderTopWidth: 0.5, borderColor: ‘# DDD8CE‘}]}>
            <View style = {{flex: 1, borderRightWidth: 1, borderColor: ‘# DDD8CE’,}}>
                <Text style = {{color: ‘# F742AB’, marginLeft: 5, fontWeight: ‘bold’, fontSize: 15, marginTop: 8}}> Dinner invitation </ Text>
                <Text style = {{fontSize: 12, marginTop: 4, marginLeft: 5}}> Friends and family often get together </ Text>
                <Image style = {{height: 25, width: 25, alignSelf: 'center'}} source = {{uri: 'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}></Image >
            </ View>
            <View style = {{flex: 1,}}>
                <Text style = {[styles.font14, {color: ‘# FF8601‘, marginTop: 8, marginLeft: 5}]}> Famous stores snapped up </ Text>
                <Text style = {[{marginLeft: 5, fontSize: 12, marginTop: 4,}]}> Also </ Text>
                <Text style = {[{marginLeft: 5, fontSize: 12, marginTop: 4,}]}> 12:06:12 points </ Text>
            </ View>
          </ View>
        </ View>
    </ View>
    <View>
      <View style = {{borderBottomWidth: 1, borderTopWidth: 1, borderColor: ‘# DDD8CE’, marginTop: 40, height: 65, flexDirection: ‘row’, paddingTop: 10}}>
        <View style = {[{flex: 1}]}>
            <Text style = {{fontSize: 17, color: ‘# FF7F60’, fontWeight: ‘900’, marginLeft: 7}}> One yuan to eat a big meal </ Text>
            <Text style = {{marginLeft: 7, fontSize: 12, marginTop: 3}}> Exclusive for new users </ Text>
        </ View>
        <View style = {{flex: 1}}>
            <Image style = {{height: 50, width: 120}} source = {{uri: ‘http: //p1.meituan.net/280.0/groupop/7f8208b653aa51d2175848168c28aa0b23269.jpg‘}}> </ Image>
        </ View>
      </ View>
    </ View>
    <View>
      <View style = {{flexDirection: ‘row‘,}}>
        <View style = {[styles.row, {borderColor: ‘# DDD8CE’, borderRightWidth: 1}]}>
          <View style = {{flex: 1,}}>
            <Text style = {{fontSize: 17, color: ‘# EA6644‘, fontWeight: ‘bold’, marginLeft: 7}}> Luan Festival Carnival </ Text>
            <Text style = {{fontSize: 12, color: ‘# 97979A’, marginTop: 3, marginLeft: 7}}> BBQ from 6.6 yuan </ Text>
          </ View>
          <View style = {{flex: 1}}>
            <Image style = {{width: 60, height: 55}} source = {{uri: ‘http://p1.meituan.net/280.0/groupop/fd8484743cbeb9c751a00e07573c3df319183.png‘}}> </ Image>
          </ View>
        </ View>
        <View style = {styles.row}>
          <View style = {{flex: 1}}>
            <Text style = {{fontSize: 17, color: ‘# EA6644‘, fontWeight: ‘bold’, marginLeft: 7}}> Graduation trip </ Text>
            <Text style = {{fontSize: 12, color: ‘# 97979A’, marginTop: 3, marginLeft: 7}}> Choose a hotel to be at ease </ Text>
          </ View>
          <View style = {{flex: 1}}>
            <Image style = {{width: 60, height: 55}} source = {{uri: ‘http://p0.meituan.net/280.0/groupop/ba4422451254f23e117dedb4c6c865fc10596.jpg‘}}> </ Image>
          </ View>
        </ View>
      </ View>
      <View style = {{flexDirection: ‘row‘,}}>
        <View style = {[styles.row, {borderColor: ‘# DDD8CE’, borderRightWidth: 1, marginLeft: 1},]}>
          <View style = {{flex: 1}}>
            <Text style = {{fontSize: 17, color: ‘# EA6644‘, fontWeight: ‘bold’, marginLeft: 7}}> 0 yuan meal strikes </ Text>
            <Text style = {{fontSize: 12, color: ‘# 97979A’, marginTop: 3, marginLeft: 7}}> Free food, drink and shopping </ Text>
          </ View>
          <View style = {{flex: 1}}>
            <Image style = {{width: 60, height: 55}} source = {{uri: ‘http://p0.meituan.net/280.0/groupop/6bf3e31d75559df76d50b2d18630a7c726908.png‘}}> </ Image>
          </ View>
        </ View>
        <View style = {styles.row}>
          <View style = {{flex: 1}}>
            <Text style = {{fontSize: 17, color: ‘# EA6644‘, fontWeight: ‘bold’, marginLeft: 7}}> Popular group purchase </ Text>
            <Text style = {{fontSize: 12, color: ‘# 97979A‘, marginTop: 3, marginLeft: 7}}> What are you buying </ Text>
          </ View>
          <View style = {{flex: 1}}>
            <Image style = {{width: 60, height: 55}} source = {{uri: ‘http://p1.meituan.net/mmc/a616a48152a895ddb34ca45bd97bbc9d13050.png‘}}> </ Image>
          </ View>
        </ View>
      </ View>
    </ View>
  </ View>
);
}});

var styles = StyleSheet.create ({
    row: {
    flexDirection: ‘row’,
    paddingTop: 20
},
marTop18: {
    marginTop: 18,
},
marTop14: {
    marginTop: 14,
},
font14: {
    fontSize: 14,
},
font10: {
    fontSize: 12,
},
height160: {
    height: 160
},
yue: {
    height: 80,
},
green: {
    color: ‘# 55A44B’,
    fontWeight: ‘900’
},
red: {
    color: ‘# FF3F0D’,
    fontWeight: ‘900’
},
marLeft10: {
    marginLeft: 10,
},
part_1_left: {
    flex: 1,
    borderColor: ‘# DCD7CD’,
    borderRightWidth: 0.5,
    borderBottomWidth: 1,
},
part_1_right: {
    flex: 2,
    borderColor: ‘# DCD7CD’,
    borderBottomWidth: 1,
},
hanbao: {
    height: 55,
    width: 55
}
});


AppRegistry.registerComponent (‘HelloWorld’, () => HelloWorld);
React-Native Getting Started Guide (4)-React-Native layout combat