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.图片演示