• 于是准备做一个App启动的展示,可以左右滑动切换,并且底部有当前提示,效果图如下: 1)组件层级关系 总体来说就是分三块:一个View组件作为父容器,包裹一ViewPagerAndroid 组件和用View模拟的一个页面...

    学了一段RN了,想自己做个东西练练手。于是准备做一个App启动的展示页,可以左右滑动切换,并且底部有当前页提示,效果图如下:


    1)组件层级关系


    总体来说就是分三块:一个View组件作为父容器,包裹一ViewPagerAndroid 组件和用View模拟的一个页面切换展示组件。

    2)首先是头部引用ViewPagerAndroid组件,代码为:

    /*左右翻页组件*/
     <ViewPagerAndroid
         style={styles.container}
         //绑定事件,引用时要在函数末尾加bind(this)
         onPageSelected={this.onPageSelected.bind(this)}
         //初始化页面为第一个页面,从0开始
         initialpage={0}>
         <View style={styles.container}>
             <Image source={require('../../res/img/p1.jpg')} style={styles.image}></Image>
             <Text style={styles.welcome}>
                 医生叫我进行光合作用{'\n'}
                 不要熬夜了
             </Text>
         </View>
         <View style={styles.container}>
             <Image source={require('../../res/img/p2.jpg')} style={styles.image}></Image>
             <Text style={styles.welcome}>
                 人生不断向前的秘诀{'\n'}
                 就是忘记从那里来 记得到哪里去
             </Text>
         </View>
         <View style={styles.container}>
             <Image source={require('../../res/img/p3.jpg')} style={styles.image}></Image>
             <Text style={styles.welcome}>
                 人生路虽漫长{'\n'}
                 但是关键的就那几步
             </Text>
         </View>
         <View style={styles.container}>
             <Image source={require('../../res/img/p1.jpg')} style={styles.image}></Image>
             <Text style={styles.welcome}>
                 欢迎使用原点APP
             </Text>
         </View>
     </ViewPagerAndroid>

    此组件使用起来很简单,就是ViewPagerAndroid里面包裹几个View组件,里面View的个数就是切换页面的数量。用到的属性有两个initialpage和onPageSelected。Initialpage就是定义初始化页面,initialpage={0}就是初始化页面为第一个页面,从0开始;onPageSelected监听页面滑动,e.nativeEvent.position代表当前页面的索引值。使用时注意,绑定事件时末尾要加上bind(this),否则会报错。

    3)用View模拟页面切换提示效果,代码为:

    Code1:

    //监听页面变化
    onPageSelected=function(e) {
        //默认从0开始,0是第一页
        this.setState({page: e.nativeEvent.position});
        console.log('CurrentPage: '+e.nativeEvent.position);
        ToastAndroid.show('CurrentPage: '+e.nativeEvent.position, ToastAndroid.SHORT);
    }
    Code2:

    /*模拟页面选中*/
    <View style={styles.slider}>
        <View style={styles.ol}>
            <View style={page==0?styles.currt:styles.li}></View>
            <View style={page==1?styles.currt:styles.li}></View>
            <View style={page==2?styles.currt:styles.li}></View>
            <View style={page==3?styles.currt:styles.li}></View>
        </View>
    </View>

    本部分代码从里往外讲吧,里面4个View模式的是四个小圆点的效果。当前页面显示时通过调用Code1方法修改page的值,然后通过三目运算符判断切换显示样式,效果为原点拉长为椭圆形。

    4)代码样式:

    const styles = StyleSheet.create({
        bg: {
            flex: 1,
            backgroundColor:'#CCFF66',
        },
        container: {
            flex: 1,
            justifyContent: 'space-around',
            alignItems: 'center',
        },
        image: {
            width:300,
            height:300,
            borderRadius:150,
        },
        welcome: {
            fontSize: 16,
            textAlign: 'center',
        },
        slider: {
            justifyContent: 'center',
            alignItems: 'center',
        },
        ol: {
            backgroundColor:'rgba(0,0,0,0.3)',
            height:20,
            width:80,
            justifyContent:'space-around',
            alignItems: 'center',
            flexDirection:'row',
            borderRadius:10,
            margin:20,
        },
        li: {
            backgroundColor:'rgba(255,255,255,1.0)',
            height:10,
            width:10,
            borderRadius:5,
        },
        currt: {
            backgroundColor:'rgba(255,255,255,1.0)',
            height:10,
            width:15,
            borderRadius:5,
        },
    });

    简单做个介绍,当然布局采用的四Flex布局,使用圆形效果注意两点即可:

    1、宽高相等;2、borderRadius是高度(宽度)的一半。

    5)项目完整代码:

    /**
     * Created by linyufeng on 2016/8/27.
     */
    import React, { Component } from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        ViewPagerAndroid,
        Image,
        ToastAndroid,
    }from 'react-native';
    
    class HelloWorld extends Component {
        constructor(props) {
            super(props);
            this.state = {
                page: 0,
            }
        }
        //监听页面变化
        onPageSelected=function(e) {
            //默认从0开始,0是第一页
            this.setState({page: e.nativeEvent.position});
            console.log('CurrentPage: '+e.nativeEvent.position);
            ToastAndroid.show('CurrentPage: '+e.nativeEvent.position, ToastAndroid.SHORT);
        }
    
        render() {
            let page = this.state.page;
            return (
                
                                医生叫我进行光合作用{'\n'}
                                不要熬夜了
                            
                                人生不断向前的秘诀{'\n'}
                                就是忘记从那里来 记得到哪里去
                            
                                人生路虽漫长{'\n'}
                                但是关键的就那几步
                            
                                欢迎使用原点APP
                            
            );
        }
    }
    
    const styles = StyleSheet.create({
        bg: {
            flex: 1,
            backgroundColor:'#CCFF66',
        },
        container: {
            flex: 1,
            justifyContent: 'space-around',
            alignItems: 'center',
        },
        image: {
            width:300,
            height:300,
            borderRadius:150,
        },
        welcome: {
            fontSize: 16,
            textAlign: 'center',
        },
        slider: {
            justifyContent: 'center',
            alignItems: 'center',
        },
        ol: {
            backgroundColor:'rgba(0,0,0,0.3)',
            height:20,
            width:80,
            justifyContent:'space-around',
            alignItems: 'center',
            flexDirection:'row',
            borderRadius:10,
            margin:20,
        },
        li: {
            backgroundColor:'rgba(255,255,255,1.0)',
            height:10,
            width:10,
            borderRadius:5,
        },
        currt: {
            backgroundColor:'rgba(255,255,255,1.0)',
            height:10,
            width:15,
            borderRadius:5,
        },
    });
    
    AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

    拷贝代码请修改组件名HelloWorld为自己项目的名字,否则会报错。

    展开全文
  • reactNative的页面跳转 2017-05-02 23:29:52
    reactNative的页面跳转
  • 1:目录2:App.jsimport {AppStackNavigator} from "./navigations/AppNavigators"...3:AppTabNavigators.js(导航)import React from 'react'; import { createStackNavigator, ...
  • 安卓原生页面与react-native页面相互跳转实现React-Native集成到现有的安卓项目请移步:1.创建react-native项目2.原生页面跳转到react-native页面3.react-native页面跳转到原生页面 React-Native集成到现有的安卓...
  • React-Native 闪屏倒计时3秒进入项目 首先声明:参考了转载的博主的方法,做了一点点修改 转载的博主文章地址:https 效果图.mp4 效果: 就是打开软件,右上角实现了一个倒计时进入项目,也可以点击右上角跳...
  • 欢迎大家关注【跨平台开发那些事】公众号,定期推...基于最新版本React Native实现JsBundle预加载,界面秒开优化 一、开源库介绍 今年1月份,新开源的react-natvigation库备受瞩目。在短短不到3个月的时间,gith...
  • ReactNative页面跳转Navigator 2016-04-09 15:02:12
    React Native页面跳转NavigatorNavigator即导航器,通过导航器我们可以实现应用在不同的页面之间进行跳转。 导航器会建立一个路由栈,用来弹出,推入或者替换路由状态。该路由栈相当于android原生中使用的任务栈。...
  • 转载请标明出处:http://blog.csdn.net/u010046908/article/details/50781360 本文出自:【李东的博客】最近一直非常的关注react-native的开发,每天都会看到江清清技术专栏中关于react-native的 使用,基本上从搭建...
  • React Native / React调试技巧 2018-09-07 00:14:57
    React Native / React调试技巧 做过原生APP开发的同学们都清楚,我们在Xcode和studio中就可以直接对编写的代码进行断点调试,很方便,但是web开发断点调试就不能直接在开发工具中完成了,需要借助浏览器来完成,...
  • React Native调试技巧与心得 2016-08-15 22:44:27
    在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。 ...
  • React Native 充分利用了 Facebook 的现有轮子,是一个很优秀的集成作品,使用 RN 即可做到无需编译就能远程热更新 App,再加上友好的开发方式、快到爆炸的开发效率、RN 已经完爆了其他的 App 开发方式,即使是一个...
  • 思路:新建一个组件作为 Android 的启动页,index.android.js 的初始化窗口改为 Android启动页,设置定时器,使其在1.5秒后自动跳转到 Main 组件。 GDLaunchPage.js /** * Android 启动页面 */ import React, { ...
  • react-native 第三方库 2020-06-21 15:01:25
    react-native 第三方库 React-Native-Elements 一组开发RN的UI工具包(强烈推荐) ???????????????????? react-native-calendars ???????????????? 优秀的日历控件 apsl-react-native-button 定义了一个Button支持用...
  • React Native 基础篇 2018-02-26 14:52:14
    虽然React Native出来已经很久了,但是还是想分享一下。技术这东西更新的太快,觉得有用就学,不能犹豫,不然什么都不会。 一,环境配置 1,这里讲的是window+android配置,如果想了解其他配置请去官网查看...
  • React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 ...
  • React Native 混合开发-Android篇创建一个React Native 项目1. 通过npm安装react-native的方式添加一个React Native项目2. 通过react-native init来初始化一个React Native项目二、添加React Native所需要的依赖第一...
  • 继博主上一篇搭建React-Native环境搭配完成后,开始来构建我们的项目了。 首先搭建一个项目,博主第一关注的即项目的目录。(这一方面关于项目的目录以及搭建在网上的资料是真的很少啊) 先不多说,上图。 (上...
  • 我们知道无论是底部 Button 切换,还是页面跳转统称为导航功能,有了这些功能,一个完整的 App 基本骨架才会出来,接下来才能用业务逻辑去填充整个骨架,在 React-Native 中,Facebook 也推出过导航...
  • React Native学习心得 2019-04-15 18:24:37
    目前通过《React Native移动开发实战-向洪治版》进行基础学习 结合网址进行学习:https://reactnative.cn/ 讨论社区:https://www.facebook.com/groups/react.native.community React Native - 调试技巧及调试...
  • ReactNative初体验 2017-07-30 00:36:41
    这个月开始研究ReactNative,说起ReactNative,大家应该都不会陌生,它的口号是’Learn once, write anywhere’,特点就是使用JavaScript 和React构建我们的应用,是一个真实的App(和web App和HTML有本质区别),不...
1 2 3 4 5 ... 20
收藏数 2,036
精华内容 814