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

View 组件

---

 

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

• 实现目标

布局分析：一行三列。

 

• 目标分析

实现步骤：

1. 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);