React-native Getting Started Guide--4th react-native Layout Combat (ii)

React-native Getting Started GuideGitHub: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 last one weeks of writing the article below, the link is GitHub page, in fact, you can also find the article in the series blog:

• 1th article Hello React-native
• 2nd. Understanding Code Structure
• 3rd article css and layout
• The 4th Chapter Learning react-native Layout (i)
• 4th article react-native layout Combat (ii)
• 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

Fourth article react-native layout Combat (ii)

In the process of deepening and deepening, there are still many pits that find React-Native layouts and styles. He is not as flexible and regular as a browser. The rules need to be discovered when I step on the pit. For example: there is no zIndex, the following elements cover the previous elements; the inner elements cover the outer elements, etc., the setting of borderRadius needs to take into account the position of the inner elements and so on.

First, the contents of the actual combat

Here, Ctrip's App homepage is chosen as the chestnut. It is not strictly 9 squares (it is slightly more difficult than the 9th grid...), but it is very good for us to practice flexbox. The final results need to be completed as follows:

Ii. Breakdown of Content

The entire page can be divided into several parts, roughly as follows:

• Head
• Picture Carousel
• 9 Gongge
• Bottom activity

Third, the head navigation bar

Because the components have not been mentioned yet, here is just a brief introduction. Implementing the head navigation bar in React-Native is as simple as using the NavigatorIOS component. Start now.

1, we add the following code in index.ios.js; create folder pagaes and create Index.js under pages
Var React = require(‘react-native‘);
Var Index = require(‘./pages/Index‘);

Var {
     NavigatorIOS,
     AppRegistry,
     StyleSheet,
} = React;

Var NV = React.createClass({
     Render: function(){
         Return(
             <NavigatorIOS
                 Style={styles.container}
                 initialRoute={{
                     Title: ‘Home ‘,
                     Component: Index,
                 }}
             />
         );
     }
});

Var styles = StyleSheet.create({
     Container: {
         Flex: 1,
     }
});


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

Analysis code:
  (1) require: Introducing external modules, just like introducing our own created /pages/Index.js.
  (2) Introduce definitions NavigatorIOS, AppRegistry, StyleSheet components and classes.
  (3) Call the NavigatorIOS component in the render, initialRoute is the initialization route, title is the head title of the current page; component is the component displayed under the current route;
  (4) Note: The style of NavigatorIOS needs to be set, for example, the setting is flex:1, otherwise the content body cannot be displayed;
  (5) Finally we need to register the current application: AppRegistry.registerComponent(‘HelloWorld‘, () => NV);

  2, create an Index.js file, the contents of the file is as follows, module.exports exposes the Index module.

Iv. Picture Carousel

Here the image carousel uses the third-party component react-native-swiper, of course, React-Native supports a set of transforms directly. We start the npm command line and use the following command to install the module in the root of the project.

$ npm react-native-swiper --save

After the installation is complete, we need to complete the carousel function. Because you can go to github to see the interfaces and parameters exposed by swiper. The github address is: https://github.com/leecade/react-native-swiper

(1) Introducing swiper, also mentioned require.
Var Swiper = require(‘react-native-swiper‘);

(2) Using a swiper to package the carousel into separate components
Var sliderImgs = [
    ‘http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png’,
    ‘http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png’,
    ‘http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg’
];
Var Slider = React.createClass({
    Render: function(){
    Return (
      <Swiper style={styles.wrapper} showsButtons={false} autoplay={true} height={150} showsPagination={false}>
        <Image style={[styles.slide,]} source={{uri: sliderImgs[0]}}></Image>
        <Image style={[styles.slide,]} source={{uri: sliderImgs[1]}}></Image>
        <Image style={[styles.slide,]} source={{uri: sliderImgs[2]}}></Image>
      </Swiper>
    );
  }
});
(3) This way we can use it directly in the render: <Slider/>

V. Complete the first 9-grid layout, followed by a copy

In fact, the four nine squares are the same, this can actually be packaged into components, here in the form of copy, develop one, the other three are ok, not lazy engineers, not good engineers [smirking]. Analyze the layout:
(1) In fact, the first is the layout of three columns, then the outer component needs flexDirection: ‘row’, each occupying 1/3 of the width, that is, their respective flex:1;
(2) Each column is divided into two rows, each row is required to be flex: 1, each occupying half of the height;
(3) The first column is a combination of text and pictures, and the rest are text combinations;
(4) All in-row elements are horizontally and vertically centered;
(5) A TouchableHighlight component is used here to start the onPress event, similar to a click or touch event.

        <View style={[styles.sbu_red, styles.sbu_view]}>
        <TouchableHighlight underlayColor={‘#FA6778‘} style={{flex:1}}>
            <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
                <View style={[styles.sub_con_flex, styles.sub_text]}>
                    <Text style={[styles.font16]}>Hotel</Text>
                </View>
                <View style={[styles.sub_con_flex]}>
                    <Image style={[styles.sbu_icon_img]} source={{uri:BUIcon[0]}}></Image>
                </View>
            </View>
        </TouchableHighlight>
        <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
            <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
                <Text style={[styles.font16]}>Overseas</Text>
            </View>
            <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}> periphery</Text>
            </View>
        </View>
        <View style={[styles.sbu_flex]}>
            <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
                <Text style={[styles.font16]}>Group purchase. Special offer</Text>
            </View>
            <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>Inn.Apartment</Text>
            </View>
        </View>
    </View>

Six, Style class

After finishing the principle of layout, you need to paste the style here for reference only:
Var styles = StyleSheet.create({
//container
Container:{
    backgroundColor: ‘#F2F2F2‘,
    Flex: 1,
},
//slider
Wrapper: {
    Height:80,
},
Slide: {
    Height:80,
    resizeMode: Image.resizeMode.contain,
},
//sbu
Sbu_view:{
    Height:84,
    marginLeft: 5,
    marginRight: 5,
    borderWidth: 1,
    borderRadius: 5,
    marginBottom: 10,
    flexDirection: ‘row‘,
},
Sbu_red:{
    backgroundColor: ‘#FA6778‘,
    borderColor: ‘#FA6778‘,
    marginTop:-70,
},

Sbu_blue:{
    backgroundColor: ‘#3D98FF‘,
    borderColor: ‘#3D98FF‘,
},

Sbu_green:{
    backgroundColor: ‘#5EBE00‘,
    borderColor: ‘#5EBE00‘,
},

Sbu_yellow:{
    backgroundColor: ‘#FC9720‘,
    borderColor: ‘#FC9720’,
},
Sbu_flex:{
    Flex: 1,
},
sbu_borderRight:{
    borderColor: ‘#fff‘,
    borderRightWidth: 0.5,
},
Sbu_icon_img:{
    Height:40,
    Width:40,
    resizeMode:Image.resizeMode.contain,
},
Sub_con_flex:{
    Flex: 1,
    justifyContent: ‘center’,
    alignItems: ‘center‘,
},
Sub_text:{
    justifyContent: ‘center‘,
},
Font16:{
    fontSize: 17,
    Color:‘#FFF‘,
    fontWeight: ‘900’,
},
sbu_borderBottom:{
    borderBottomWidth: 0.5,
    borderBottomColor: ‘#fff‘,
},
Img_view:{
    Height: 62,
    marginLeft: 5,
    marginRight: 5,
    flexDirection: ‘row‘,
    marginBottom: 20,
    backgroundColor: ‘#fff‘,
},
Img_flex:{
    Flex: 1,
    borderWidth: 1,
    borderColor: ‘#ccc‘,
},
Img_wh: {
    Height:59,
    borderRightWidth: 0,
    resizeMode:Image.resizeMode.contain,
}
});

Focus on resizeMode: Image.resizeMode.contain. In React-Native, the size of the image is not adaptive according to a given width or height, so we need to make the image adaptive according to width or height, then you can use resizeMode:Image.resizeMode.contain. The facebook prompt error message is not mentioned in the style sheet, nor is it mentioned in the document. So there are still a lot of pits that need to be explored together.

Vii. index.js Entire code, for reference only

The ScrollView component is involved in the example code, mainly to accommodate small screen machines, and can scroll views.

Code Link: GitHub

React-native Getting Started Guide--4th react-native Layout Combat (ii)