[RN] 06 - UI Component: View, Text & Touchable

View 组件

类似div，支持多层嵌套以及flex布局。

实现目标

布局分析：一行三列。

目标分析

实现步骤：

1. 加载View组件
2. 创建组件
3. 添加样式表 - styleSheet.create()
4. 注册入口 - registerComponent()
5. 外层布局
6. flexbox水平三栏布局 - View嵌套
7. 上下两栏布局
8. 完善效果

布局实现

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
\'use strict\';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
    PixelRatio,
  Text,
  View
} from \'react-native\';

---------------------------------------------------------------

class DongFang extends Component {
  render() {
    return (
      <View style={styles.flex}>
      <View style={styles.container}>　　// 伸缩容器
        <View style={[styles.item,styles.center]}>
          <Text style={styles.font}>酒店</Text>
        </View>

        <View style={[styles.item,styles.lineLeftRight]}>
          <View style={[styles.center,styles.flex,styles.lineCenter]}>
            <Text style={styles.font}>海外酒店</Text>
          </View>
          <View style={[styles.center,styles.flex]}>
            <Text style={styles.font}>特惠酒店</Text>

          </View>
        </View>

        <View style={styles.item}>
          <View style={[styles.center,styles.flex,styles.lineCenter]}>
            <Text style={styles.font}>团购</Text>
          </View>
          <View style={[styles.center,styles.flex]}>
            <Text style={styles.font}>客栈，公寓</Text>
          </View>
        </View>
      </View>
        </View>
    );
  }
}

---------------------------------------------------------------

const styles = StyleSheet.create({
  container: {
    marginTop:200,
    marginLeft:5,
    marginRight:5,
    height:84,
    flexDirection:\'row\',
    borderRadius:5,
    padding:2,
    backgroundColor:\'#FF0067\',
  },
  item: {
    flex: 1,
    height:80,

  },
  center:{
    justifyContent:\'center\',
    alignItems:\'center\',
  },
  flex:{
    flex:1,
  },
  font:{
    color:\'#fff\',
    fontSize:16,
    fontWeight:\'bold\',
  },
  lineLeftRight:{
    borderLeftWidth:1/PixelRatio.get(),　　// 纵向白色夹缝的设置
    borderRightWidth:1/PixelRatio.get(),
    borderColor:\'#fff\',
  },
  lineCenter:{
    borderBottomWidth:1/PixelRatio.get(),　// 横向白色夹缝的设置
    borderColor:\'#fff\',
  },
});

---------------------------------------------------------------

AppRegistry.registerComponent(\'DongFang\', () => DongFang);

三种样式

内联不建议，可读性不太好。

Text 组件

实现效果

可以通过工具扒一下原网页结构。

代码分析

这里只写了个header，体现了组件分离的思想。

Header.js
/**
 * Created by StevenJiang on 2016/4/4.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

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

class Header extends Component{
    render(){
        return (
            <View style={styles.flex}>
                <Text style={styles.font}>

                    <Text style={styles.font_1}>网易</Text>
                    <Text style={styles.font_2}>新闻</Text>
                    <Text>有态度"</Text>
                </Text>
            </View>

        );
    }
}

const styles = StyleSheet.create({
    flex:{
        marginTop:25,
        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\',
    },
});

// 作为独立组件供其他文件使用
module.exports=Header;

主函数调用子组件。

Main.js
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
\'use strict\';

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

//const Header=require(\'./header\');
import Header from \'./header\';

class DongFang extends Component {
  render() {
    return (
        <View style={styles.flex}>
            <Header></Header>
            <List title=\'一线城市楼市退烧 有房源一夜跌价160万\'></List>
            <List title=\'上海市民称墓地太贵买不起 买房存骨灰\'></List>
            <List title=\'朝鲜再发视频:摧毁青瓦台 一切化作灰烬\'></List>
            <List title=\'生活大爆炸人物原型都好牛逼\'></List>

            <ImportantNews
                news={[
                \'解放军报报社大楼正在拆除 标识已被卸下(图)\',
                \'韩国停签东三省52家旅行社 或为阻止朝旅游创汇\',
                \'南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻\',
                \'防总部署长江防汛:以防御98年量级大洪水为目标\'
                ]}>
            </ImportantNews>
        </View>
    );
  }
}

--------------------------------------------------------------------------------
class List extends Component{
    render(){
        return (
            <View style={styles.list_item}>
               <Text style={styles.list_item_font}>{this.props.title}</Text>
            </View>
        );
    }
}

class ImportantNews extends Component{

    show(title){
        alert(title);
    }

    render(){
        var news=[];
        /******************
          * 遍历数组
          *****************/
        for(var i in this.props.news){
            var text=(
                <Text
                    onPress={this.show.bind(this, this.props.news[i])}
                    numberOfLines={2}
                    style={styles.news_item}
                    key={i}　　// 避免出现warning，因为props是数组，所以建议添加了key

                    >{this.props.news[i]}</Text>
            );
            news.push(text);
        }
        return (
            <View style={styles.flex}>
                <Text style={styles.news_title}>今日要闻</Text>
                {news}
            </View>
        );
    }
}

-------------------------------------------------------------------------------

const 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,
    },

    news_item:{
        marginLeft:10,
        marginRight:10,
        fontSize:15,
        lineHeight:40,
    },

    news_title:{
        fontSize:20,
        fontWeight:\'bold\',
        color:\'#CD1D1C\',
        marginLeft:10,
        marginTop:15,

    },
});

AppRegistry.registerComponent(\'DongFang\', () => DongFang);

Touchable

功能介绍

赋予其他组件被点击的能力

代码分析

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
\'use strict\';

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


var onePT = 1 / PixelRatio.get();

class DongFang extends Component {
  render() {

    return (
        <View style={styles.flex}>

          // 高亮
          <TouchableHighlight onPress={this.show.bind(this,\'yes or no.\')} underlayColor=\'#E1F6FF\'>
              <Text style={styles.item}>欢迎学习React Native技术-TouchableHighlight</Text>
          </TouchableHighlight>

          // 透明度
          <TouchableOpacity onPress={this.show.bind(this,\'hehehe\')}>
              <Text style={styles.item}>作者东方耀Q：3096239789-TouchableOpacity</Text>
          </TouchableOpacity>

          // 无反馈
          <TouchableWithoutFeedback onPress={this.show.bind(this,\'hahaha\')}>
            <Text style={styles.item}>作者东方耀Q：3096239789-TouchableWithoutFeedback</Text>
          </TouchableWithoutFeedback>

        </View>
    );
  }

  show(txt){
    alert(txt);
  }
}

--------------------------------------------------------------------------------------------------------------

const styles = StyleSheet.create({

  flex:{
    flex:1,
    marginTop:25,
  },

 item:{
   fontSize:18,
   color:\'#434343\',
   marginLeft:5,
   marginTop:10,
 },

});

AppRegistry.registerComponent(\'DongFang\', () => DongFang);