zoukankan      html  css  js  c++  java
  • React Native商城项目实战07

    1.More/More.js

    /**
     * 更多
     */
    import React, { Component } from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Image,
        TouchableOpacity,
        Platform
    } from 'react-native';
    
    // ES5
    var More = React.createClass({
        render() {
            return (
                <View style={styles.container}>
                    {/*导航条*/}
                    {this.renderNavBar()}
                    <Text style={styles.welcome}>
                        More
                    </Text>
                </View>
            );
        },
    
        // 导航条
        renderNavBar(){
            return(
                <View style={styles.navOutViewStyle}>
                    <Text style={{color:'white',fontSize:16,fontWeight:'bold'}}>更多</Text>
                        <TouchableOpacity onPress={()=>{alert('点击了')}} style={styles.rightViewStyle}>
                            <Image source={{uri:'icon_mine_setting'}} style={styles.navImgStyle} />
                        </TouchableOpacity>
                </View>
            )
        }
    });
    
    const styles = StyleSheet.create({
        // 导航条视图
        navOutViewStyle:{
            height:Platform.OS === 'ios' ? 64 : 44,
            backgroundColor:'rgba(255,96,0,1)',
            // 主轴方向
            flexDirection:'row',
            // 侧轴对齐方式 垂直居中
            alignItems:'center',
            // 主轴方向居中
            justifyContent:'center',
        },
        // 导航栏右侧
        rightViewStyle:{
            // 绝对定位
            position:'absolute',
            right:10,
            bottom:15,
        },
        // 导航条上图片
        navImgStyle:{
            Platform.OS === 'ios' ? 28 : 24,
            height:Platform.OS === 'ios' ? 28 : 24,
        },
        container: {
            flex: 1,
            backgroundColor: '#e8e8e8',
        },
        welcome: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
        },
    
    });
    
    // 输出
    module.exports = More;
    

     

    2.效果图

  • 相关阅读:
    android有进度条的下载图片并且显示图片
    在Java中,直接将类的对象使用system.out.println输出
    改写toString
    Android中Uri的使用
    重写toString()
    权限管理
    实训
    第一次上传文件成功
    sql server 2005 JDBC连接遇到的问题
    JSP 权限控制
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7343978.html
Copyright © 2011-2022 走看看