React Native-6.React Native Text组件,多组件封装实战之凤凰资讯页面

前端之家收集整理的这篇文章主要介绍了React Native-6.React Native Text组件,多组件封装实战之凤凰资讯页面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

现来个图:没图说个xx

先来分析怎么做

  • 一个导航栏
  • 一个列表
  • 一个摘要列表

大体可以分为上中下三个模块,那么我们从上到下一次封装。

我们来搞出些事情

创建.js文件,一个组件一个.js文件

我们通过命令行工具,进入工程所在的文件夹,使用touch命令创建三个组件对应的文件

命令如图:

localhost:iOSFile WangXuesen$ touch list.js
localhost:iOSFile WangXuesen$ touch importNews.js
localhost:iOSFile WangXuesen$ touch header.js

在Sublime Text 中打开三个文件,我们先来封装头部的导航栏

导航栏封装

代码

var React = require('react-native')

var {
    AppRegistry,StyleSheet,View,Text,} = React;

var Header = React.createClass({
    render:function() {
        return(
            <View style = {styles.flex}>
                <Text style = {styles.font}>
                    <Text style={styles.font_1}>凤凰</Text>
                    <Text style={styles.font_2}>资讯</Text>

                </Text>
            </View>

        );
    }
});

var styles = StyleSheet.create({
    flex: {
        marginTop: 25,height: 50,borderBottomWidth: 3/React.PixelRatio.get(),borderBottomColor: '#ef2d36',alignItems: 'center',},font: {
        fontSize: 25,fontWeight: 'bold',textAlign: 'center',/*文字在组件中居中*/

    },font_1: {
        color: '#cd1d1c',font_2: {
        color: '#fff',backgroundColor:'#cd1d1c',}

});

module.exports = Header;

代码分析:
var Header = React.createClass 此处注意,定义Header时,开头一定要大写,
- module.exports = Header;这句的意思是说,这个组件本身不是入口文件,而是一个从别的文件调用的组件,对外的名字,是Header

好了,我们来调用一下导航栏组件,看一下效果:

代码

'use strict';
var React = require('react-native');
var Header = require('./iOSFile/header.js');
var {
  AppRegistry,PixelRatio,} = React;

var stylesForFH = StyleSheet.create({
    flex: {
        flex: 1,}
});

var wxsPrj = React.createClass({
  render: function() {
    return (
        <View style = {stylesForFH.flex}> <Header></Header> </View> ); } }) AppRegistry.registerComponent('wxsPrj',() => wxsPrj);

代码详解:
var Header = require('./iOSFile/header.js');这里就像iOS中引入头文件一样,将header组件引入

列表组件封装

代码

var React = require('react-native')

var {
    AppRegistry,} = React;


var List = React.createClass({
    render: function(){
        return(
            <View style = {styles.list_item}>
                <Text style = {styles.list_item_font}>
                    {this.props.title}
                </Text>
            </View>

        );
    }
});

var styles = StyleSheet.create({
    flex: {
        flex: 1,list_item: {
        height: 40,marginLeft: 10,marginRight: 10,borderBottomWidth: 1,borderBottomColor: '#ddd',justifyContent: 'center',list_item_font: {
        fontSize: 16,});

module.exports = List;

组件调用

###引入组件:
var List = require('./iOSFile/list.js');

###组件调用
var wxsPrj = React.createClass({
  render: function() {
    return (
        <View style = {stylesForFH.flex}>
            <Header></Header>
            <List title = '马上过年回家了,你又票吗?'></List>
            <List title = '北京近期寒流离散,进入暖春的节奏也来越近!'></List>
            <List title = '春运将至,铁道部各部门已做好应急准备!'></List>
            <List title = '今年,你妈逼你结婚了吗?'></List>
        </View>
        );
    }
})

效果

要闻摘要组件

代码

var React = require('react-native')

var {
    AppRegistry,} = React;

var ImportNews = React.createClass({
    show: function(title){
        alert(title);
    },render: function(){
        var news = [];
        for(var i in this.props.news){
            var text = (
                <Text 
                    key = {i}
                    onPress = {this.show.bind(this,this.props.news[i])}
                    numberOfLines = {2}
                    style = {styles.news_item}>
                    {this.props.news[i]}
                </Text>
            );
            news.push(text);
        }

        return(
            <View style = {styles.flex}>
                <Text style = {styles.new_title}>
                    要闻摘要
                </Text>
                <View style = {styles.centerLine}></View>
                {news}
            </View>
        );
    }
});

var styles = StyleSheet.create({
    flex : {
        flex: 1,list_item : {
        height: 40,new_title: {
        fontSize: 20,marginTop: 15,color: '#cd1d1c',news_item: {
        marginLeft: 10,fontSize: 15,lineHeight: 20,centerLine: {
        backgroundColor : '#cd1d1c',height:1,}
})

module.exports = ImportNews;

组件调用

var wxsPrj = React.createClass({
  render: function() {
    return (
        <View style = {stylesForFH.flex}>
            <Header></Header>
            <List title = '马上过年回家了,你又票吗?'></List>
            <List title = '北京近期寒流离散,进入暖春的节奏也来越近!'></List>
            <List title = '春运将至,铁道部各部门已做好应急准备!'></List>
            <List title = '今年,你妈逼你结婚了吗?'></List>
            <ImportNews news = {[
                '1,过年回家,多陪陪父母','2,同学聚会,少喝酒,多吃肉,毕竟你那么瘦','3,台湾的独立分子,你们的死期到了,大圣来了!!!','4,我赵日天不服!!还有谁,我要打十个~',]}></ImportNews>
        </View>
        );
    }
})

代码详解:
现在解释几个属性

  • onPress : 该属性的值是一个函数支持按下事件(即手机触摸事件)。当手指按下的时候执行该函数

  • onLayout : 该属性的值是一个函数,用于获取该元素布局的位置和大小,例如:{“target”: 4,“layout”:{“y”:10,“width”: 300,“x”:10,“height”:117}}。一般事件函数的形式是function(e){console.log(e.nativeEvent)};,这样就可以打印事件的参数。

  • key : 在for循环中每个标签中加入key 并且每个key都是唯一的(unique),这个是和react的dom-diff算法相关的,
    在react对dom做循环的时候,会根据data-reactid生成虚拟dom树。如果你没有手动的添加unique constant key的话,react是无法记录你的dom操作的。它只会在重新渲染的时候,继续使用它自己添加的data-reactid来比对dom树。
    如果没有这个key会报警告:
    Warning: Each child in an array or iterator should have a unique “key” prop. Check the top-level render call using

alert 效果

原文链接:https://www.f2er.com/react/307245.html

猜你在找的React相关文章