自定義組件

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.運行代碼截圖：