React-Native初体验三(window下搭建应用的首页)

ReactNativeTest项目的下载地址:github

1.reactNativeTest项目运行的效果

2.实现启动页

导航器的实现

1.定一个Welcome.js文件

2.在Welcome.js中使用Navigator导航器

3.给Navigator导航器初始化

Welcome.js文件代码:

    /**导包*/
    import React from 'react';
    import {
        StyleSheet,
        Navigator,
        StatusBar,
        BackAndroid,
        View,
        Text,
        Platform
    } from 'react-native';
    /**导包*/
    import Splash from '../Splash';
    /**导一个工具类*/
    import { NaviGoBack } from '../utils/CommonUtils';
    var _navigator;

    class Welcome extends React.Component {
        /**
         * 构造器初始化
         * @param props
         */
        constructor(props) {
            super(props);
            //函数的定义并初始化
            this.renderScene = this.renderScene.bind(this);
            this.goBack = this.goBack.bind(this);
            //监听返回事件
            BackAndroid.addEventListener('hardwareBackPress', this.goBack);
        }

        /**
         * 监听手机点击返回按钮
         */
        goBack() {
            return NaviGoBack(_navigator);
        }

        /**
         * 渲染场景的函数:这里接收系统传来的两个参数,一个是路由对象,一个是导航器对象
         */
        renderScene(route, navigator) {
            let Component = route.component;//获取到initialRoute路由中设计的Splash组件
            _navigator = navigator;//导航器对象,在goBack()函数中需要用到
            return (
                <Component navigator={navigator}  route={route} />//返回一个渲染界面的Splash组件,并传递两个参数
            );
        }

        /**
         * 界面跳转的动画:这里接收系统传来的两个参数,一个是路由对象,一个是导航器对象
         */
        configureScene(route, routeStack) {
            return Navigator.SceneConfigs.PushFromRight;
        }

        /**
         * initialRouter: 路由初始化配置信息,就是说页面加载时,第一次需要展现什么内容
         *configureScene: 场景转换动画配置。在RN看来,从一个页面切换到另外一个页面,就是从一个场景切换到另外一个场景,这里配置的是场景动画信息,比如Navigator.SceneConfigs.FadeAndroid 就是淡入淡出
         *renderScene: 渲染场景,读取initialRouter传来的数据,确定显示那些内容。
         * */
        render() {
            return (
                <Navigator
                    ref='navigator'
                    style={styles.navigator}
                    configureScene={this.configureScene}
                    renderScene={this.renderScene}
                    initialRoute={{
                    component: Splash,
                    name: 'Splash'
              }}
                />
            );
        }
    }

    /**
     * 弹性(Flex)宽高:
     *
     * 使用flex:1来指定某个组件扩张以撑满所有剩余的空间
     *如果有多个并列的子组件使用了flex:1,则这些子组件会平分父容器中剩余的空间。
     * 如果这些并列的子组件的flex值不一样,则谁的值更大,谁占据剩余空间的比例就更大
     *
     * 注意:
     * 组件能够撑满剩余空间的前提是其父容器的尺寸不为零。
     * */
    let styles = StyleSheet.create({
        navigator: {
            flex: 1
        }
    });

    export default Welcome;

定时器的实现

1.定一个Splash.js文件

2.在构造器中获取导航器Navigator对象

3.设计定时,实现界面跳转

Splash.js文件代码:

    import React from 'react';
    import {
      Dimensions,
      Image,
      InteractionManager,
      View,
      Text,
    } from 'react-native';

    import AppMain from './page/AppMain.js';
    /**获取手机屏幕的宽和高*/
    var {height, width} = Dimensions.get('window');

    class Splash extends React.Component {

      /***
       * 构造器
       * 开始了一个定时器setTimeout(),2500豪秒后跳转到AppMain.js
       * @param props
       */
      constructor(props) {
        super(props);
        //获取navigator对象,在welcome.js传过来的
        const {navigator} = props;//可以
        //const {navigator} =this. props;//可以
        //const {navigator} = this.props.navigator;//这个是不可以的,会报错
        //const {navigator} = props.navigator;//这个是不可以的,会报错
        this.timer = setTimeout(() => {
            InteractionManager.runAfterInteractions(() => {
              navigator.resetTo({
                component: AppMain,
                name: 'AppMain'
              });
            });
          }, 2500);
      }

      /**
       * 渲染界面,只有一张图片
       * @returns {XML}
         */
      render() {
        return (
          <View style={{flex:1}}>
            <Image
              style={{flex:1,width:width,height:height}}
              source={require('./image/ic_welcome.png')}
              />
          </View>
        );
      }
    }
    export default Splash;

3.修改index.android.js文件

    /**这里是导包,导入我们要使用的控件*/
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    /**导入一个自己写的js文件*/
    import Welcome from './app/page/Welcome.js';


    // 注册应用(registerComponent)后才能正确渲染
    // 注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册
    AppRegistry.registerComponent('reactNativeTest', () => Welcome);

4.运行

1.来到项目根目录,打开cmd

2.执行:

react-native start

3.来到项目根目录,打开新的cmd

4.执行:

react-native run-android

5.效果:

3.实现首页

1.定一个AppMain.js文件

2.监听点击返回按钮

     BackAndroid.addEventListener('hardwareBackPress', xxxxx);

3.实现顶部导航栏

    <View style={styles.headerMenu}>

                    <View style={{flex:1,justifyContent:'center'}}>
                        <TouchableOpacity onPress={()=>{this.onClickTitleBar(0)}}>
                            <View style={{justifyContent:'flex-start',flexDirection:'row',alignItems:'center'}}>
                                <Image source={require('../image/hotel_ic_home.png')}
                                       style={{width:20,height:26,marginLeft:8}}/>
                            </View>
                        </TouchableOpacity>
                    </View>

                    <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                        <Text style={{fontSize: 20, textAlign: 'center'}} >首页 </Text>
                    </View>

                    <View style={{justifyContent:'flex-end',alignItems:'center',flex:1,flexDirection:'row'}}>
                        <TouchableOpacity onPress={()=>{this.onClickTitleBar(1)}}>
                            <Image source={require('../image/ic_action_search.png')}
                                   style={{width:24,height:24,marginRight:8,alignItems:'center'}}/>
                        </TouchableOpacity>
                    </View>
     </View>

4.实现:ViewPagerAndroid

     <ViewPagerAndroid
           ref={viewPager => { this.viewPager = viewPager; }}
           style={styles.flex1}
           initialPage={0}
           pageMargin={0}>


          <View style={styles.page}>
                 <Text>Page 1</Text>
          </View>
          <View style={styles.page}>
                 <Text>Page 2</Text>
          </View>
          <View style={styles.page}>
                 <Text>Page 3</Text>
           </View>
     </ViewPagerAndroid>

5.实现底部导航栏:

      <View style={styles.footerMenu}>
             <TouchableOpacity onPress={() => this.onClick(1)}>
                        <Image source={require('../image/ic_menu_deal_off.png')} style={{width:33,height:33}} />
                        <Text style={styles.welcome} >首页 </Text>
             </TouchableOpacity>

             <TouchableOpacity onPress={() => this.onClick(2)}>
                        <Image source={require('../image/ic_menu_poi_off.png')} style={{width:33,height:33}} />
                        <Text style={styles.welcome} >商城 </Text>
             </TouchableOpacity>

             <TouchableOpacity onPress={() => this.onClick(3)} >
                        <Image source={require("../image/ic_menu_user_off.png")} style={{width:33,height:33,marginLeft:3}}/>
                        <Text style={styles.welcome} >个人中心 </Text>
             </TouchableOpacity>
       </View>

6.实现点击事件:TouchableOpacity

       <TouchableOpacity onPress={()=>{this.onClickTitleBar(0)}}>
             .....
        </TouchableOpacity>

AppMain.js文件代码:

    /**导包*/
    import React from 'react';
    import {
        StyleSheet,
        Navigator,
        StatusBar,
        BackAndroid,
        View,
        Text,
        Platform   ,
        AppRegistry,
        ViewPagerAndroid,
        TouchableOpacity,
        Image,
    } from 'react-native';

    /**导包*/
    import { NaviGoBack } from '../utils/CommonUtils';

    var _navigator;

    class AppMain extends React.Component {

        constructor(props) {
            super(props);
            this.goBack = this.goBack.bind(this);
            //监听返回事件
            BackAndroid.addEventListener('hardwareBackPress', this.goBack);
        }

        /**
         * 点击返回上一个界面的函数
         * @returns {*}
         */
        goBack() {
            return NaviGoBack(_navigator);
        }

        /**
         * 处理点击事件的函数
         * @param page
         */
        onClick(page) {
            this.viewPager.setPage(page - 1);

        }
        /**
         * 处理点击事件的函数
         * @param page
         */
        onClickTitleBar(numer){
            this.viewPager.setPage(numer - 1);
        }

        /**
         * 渲染界面
         * @returns {XML}
         */
        render() {
            return (
            <View style={styles.flex1}>

                <View style={styles.headerMenu}>

                    <View style={{flex:1,justifyContent:'center'}}>
                        <TouchableOpacity onPress={()=>{this.onClickTitleBar(0)}}>
                            <View style={{justifyContent:'flex-start',flexDirection:'row',alignItems:'center'}}>
                                <Image source={require('../image/hotel_ic_home.png')}
                                       style={{width:20,height:26,marginLeft:8}}/>
                            </View>
                        </TouchableOpacity>
                    </View>

                    <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                        <Text style={{fontSize: 20, textAlign: 'center'}} >首页 </Text>
                    </View>

                    <View style={{justifyContent:'flex-end',alignItems:'center',flex:1,flexDirection:'row'}}>
                        <TouchableOpacity onPress={()=>{this.onClickTitleBar(1)}}>
                            <Image source={require('../image/ic_action_search.png')}
                                   style={{width:24,height:24,marginRight:8,alignItems:'center'}}/>
                        </TouchableOpacity>
                    </View>
                </View>



                <Text style={styles.line}></Text>

                <ViewPagerAndroid
                    ref={viewPager => { this.viewPager = viewPager; }}
                    style={styles.flex1}
                    initialPage={0}
                    pageMargin={0}>


                    <View style={styles.page}>
                        <Text>Page 1</Text>
                    </View>
                    <View style={styles.page}>
                        <Text>Page 2</Text>
                    </View>
                    <View style={styles.page}>
                        <Text>Page 3</Text>
                    </View>
                </ViewPagerAndroid>


                <Text style={styles.line}></Text>

                <View style={styles.footerMenu}>
                    <TouchableOpacity onPress={() => this.onClick(1)}>
                        <Image source={require('../image/ic_menu_deal_off.png')} style={{width:33,height:33}} />
                        <Text style={styles.welcome} >首页 </Text>
                    </TouchableOpacity>

                    <TouchableOpacity onPress={() => this.onClick(2)}>
                        <Image source={require('../image/ic_menu_poi_off.png')} style={{width:33,height:33}} />
                        <Text style={styles.welcome} >商城 </Text>
                    </TouchableOpacity>

                    <TouchableOpacity onPress={() => this.onClick(3)} >
                        <Image source={require("../image/ic_menu_user_off.png")} style={{width:33,height:33,marginLeft:3}}/>
                        <Text style={styles.welcome} >个人中心 </Text>
                    </TouchableOpacity>
                </View>

             </View>
            );
        }
    }

    /**
     * 属性介绍:
     *
     * flexDirection:
     *
     * style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列,还是沿着竖直轴(column)方向排列呢?默认值是竖直轴(column)方向
     *
     * justifyContent:
     *
     *style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start、center、flex-end、space-around以及space-between
     *
     * alignItems:
     *
     * 在组件的style中指定alignItems可以决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start、center、flex-end以及stretch。
     *
     * backgroundColor  背景颜色
     *
     * borderColor 边界颜色
     */
    var styles = {
        flex1: {
            flex: 1,
        },
        page: {
            alignItems: 'center',
            flexDirection: 'row',
            flex: 1,
            justifyContent: 'center',
            //borderWidth: 1,
            borderColor: 'black',
        },
        headerMenu: {
            flexDirection: 'row',
            backgroundColor: '#F2F2F2',
            height: 50,
            paddingHorizontal: 10,
        },
        footerMenu: {
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            backgroundColor: '#F2F2F2',
            height: 60,
            paddingHorizontal: 40,
        },
        img: {
            alignItems: 'center',
            justifyContent: 'center',
            width:90,
            height:90
        },
        welcome: {
            fontSize: 10,
            textAlign: 'center',
        },
        line: {
            backgroundColor: '#cdcdcd',
            height: 1,
        },
    }

    export default AppMain;

6.运行

1.来到项目根目录,打开cmd

2.执行:

react-native start

3.来到项目根目录,打开新的cmd

4.执行:

react-native run-android

5.效果:

7.最后附上整个reactNativeTest项目的结构图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值