自定义组件

1.样式文件style.js

代码以下：

            import {

             StyleSheet,

            } from 'react-native';

            

            export let styles = StyleSheet.create({

             greetingView: {

             alignItems: 'center'

             },

             lotsOfGreetingsView: {

             alignItems: 'center'

             }

            });

截图以下：

2.业务文件App.js

代码以下：

            import React, {

              Component

            } from 'react';

            import {

              View,

              Text,

              AppRegistry

            } from 'react-native';

            // 加载样式文件

            import {

              styles

            } from './static/style/style';

            

            class Greeting extends Component {

              render() {

                return (

                  <View style={styles.greetingView}>

                    <Text>Hello {this.props.name}</Text>

                  </View>

                );

              }

            }

            

            export default class LotsOfGreetings extends Component {

              render() {

                return (

                  <View style={styles.lotsOfGreetingsView}>

                    <Greeting name='React' />

                    <Greeting name='React Native' />

                  </View>

                );

              }

            }

            

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

截图以下：

3.运行代码截图：