React Native项目实战1

1.执行命令，生产一个工程

$ react-native init BuyDemo

 
 


  
  
1
 
 

 
 


  
  
1
 
 

2.导入图片资源 
安卓：把文件夹放到/Android/app/src/main/res/目录下，如图： 
 
iOS: Xcode打开工程，把图片拖动到Images.xcassets里

3.根据实际需求，组织项目结构，目的是更加清晰 

4.Main.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

// ES5
var Main = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Main
                </Text>
            </View>
        );
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

// 输出
module.exports = Main;

 
 


  
  
1

  
  
2

  
  
3

  
  
4

  
  
5

  
  
6

  
  
7

  
  
8

  
  
9

  
  
10

  
  
11

  
  
12

  
  
13

  
  
14

  
  
15

  
  
16

  
  
17

  
  
18

  
  
19

  
  
20

  
  
21

  
  
22

  
  
23

  
  
24

  
  
25

  
  
26

  
  
27

  
  
28

  
  
29

  
  
30

  
  
31

  
  
32

  
  
33

  
  
34

  
  
35

  
  
36

  
  
37

  
  
38

  
  
39

  
  
40

  
  
41

  
  
42

  
  
43
 
 

 
 


  
  
1

  
  
2

  
  
3

  
  
4

  
  
5

  
  
6

  
  
7

  
  
8

  
  
9

  
  
10

  
  
11

  
  
12

  
  
13

  
  
14

  
  
15

  
  
16

  
  
17

  
  
18

  
  
19

  
  
20

  
  
21

  
  
22

  
  
23

  
  
24

  
  
25

  
  
26

  
  
27

  
  
28

  
  
29

  
  
30

  
  
31

  
  
32

  
  
33

  
  
34

  
  
35

  
  
36

  
  
37

  
  
38

  
  
39

  
  
40

  
  
41

  
  
42

  
  
43
 
 

5.index.ios.js 引入Main.js并使用这个组件:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

/*==============导入外部组件================*/
var Main = require('./Component/Main/Main');

class BuyDemo extends Component {
    render() {
        return (
            <Main />
        );
    }
}

const styles = StyleSheet.create({
});

AppRegistry.registerComponent('BuyDemo', () => BuyDemo);

 
 


  
  
1

  
  
2

  
  
3

  
  
4

  
  
5

  
  
6

  
  
7

  
  
8

  
  
9

  
  
10

  
  
11

  
  
12

  
  
13

  
  
14

  
  
15

  
  
16

  
  
17

  
  
18

  
  
19

  
  
20

  
  
21

  
  
22

  
  
23

  
  
24

  
  
25

  
  
26

  
  
27

  
  
28

  
  
29
 
 

 
 


  
  
1

  
  
2

  
  
3

  
  
4

  
  
5

  
  
6

  
  
7

  
  
8

  
  
9

  
  
10

  
  
11

  
  
12

  
  
13

  
  
14

  
  
15

  
  
16

  
  
17

  
  
18

  
  
19

  
  
20

  
  
21

  
  
22

  
  
23

  
  
24

  
  
25

  
  
26

  
  
27

  
  
28

  
  
29
 
 

6.预览效果