React Native 定義元件(簡單)

React Native 定義元件(簡單)

1. 首先建立一個header.js 檔案

2. 宣告元件

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

3. 建立元件的內容

class Header extends Component { //改為Header
    render() {
        return (
            <View style={styles.flex}>
                <Text style={styles.font}>
                    <Text style={styles.font_1}>網易</Text>
                    <Text style={styles.font_1}>新聞</Text>
                    <Text>有態度"</Text>
                </Text>
            </View>
        );
    }
}

4.樣式

const styles = StyleSheet.create({
    flex: {
        marginTop: 25, //margin-top 屬性設定元素的上外邊距。
        height: 50,
        borderBottomWidth: 3/PixelRatio.get(),
        borderBottomColor: '#EF2D36',
        alignItems: 'center', //彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
    },
    font: {
        fontSize: 25,
        fontWeight: 'bold',
        textAlign: 'center',
    },
    font_1: {
        color: '#CD1D1C',
    },
    font_2: {
        color: '#FFF',
        backgroundColor: '#CD1D1C',
    },

});

5.把模組(元件)匯出去

module.exports=Header;

6.如何使用

1.在另一個模組中匯入

const Header=require('./header');

2.使用

class FirstRN extends Component {
  render() {
    return (
        <Header></Header>//使用
    );
  }
}

7.圖片演示