React Native开源一个自己入门学习的小项目

Posted 寒小枫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native开源一个自己入门学习的小项目相关的知识,希望对你有一定的参考价值。

本篇是React Native开源小项目,目前完成了初始版本,至于后续会不会增加其他知识点,待定吧,数据来自gankio,页面跳转使用的react-navigation,一边学习一边写,下面是总体的效果,没有多么华丽的功能,各位看官自行查看吧!

一个react native开发的android app

效果图:

使用到的库:

  • react-navigation
  • react-native-image-zoom-viewer
  • react-native-vector-icons
  • 等等

首页使用TabNavigator,其余页面代码点击底部链接查看:

import React, Component from 'react';
import 
    Image,
    Text
 from 'react-native';
import 
    TabNavigator,
    StackNavigator,
 from 'react-navigation';

import Home from './tabPage/Home';
import Type from './tabPage/Type';
import ShopCar from './tabPage/Message';
import Mine from './tabPage/Mine';
import Details from './tabPage/Details';
import WebViewPage from './page/WebViewPage';
import ImageZoom from './tabPage/img/ImageZoom';
import Setting from './tabPage/Setting';

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

const Tab = TabNavigator(
    //每一个页面的配置
    Home: 
        screen: Home,
        navigationOptions: 
            //stackNavigator的属性
            headerTitle: '首页',
            gestureResponseDistance: horizontal: 300,
            headerBackTitle: null,
            headerStyle: backgroundColor: '#cf2ceb',//导航栏的样式
            headerTitleStyle: //导航栏文字的样式
                color: 'white',
                //设置标题的大小
                fontSize: 16,
                //居中显示
                alignSelf: 'center',
            ,
            //tab 的属性
            tabBarLabel: '首页',
            tabBarIcon: (tintColor) => (
                <Image
                    source=require('./image/ic_home.png')
                    style=[height: 24, width: 24, tintColor: tintColor]/>
            ),

        ,
    ,
    Type: 
        screen: Type,
        navigationOptions: 
            //stackNavigator的属性
            headerTitle: '文章',
            gestureResponseDistance: horizontal: 300,
            headerBackTitle: null,
            headerStyle: backgroundColor: '#cf2ceb',//导航栏的样式
            headerTitleStyle: //导航栏文字的样式
                color: 'white',
                //设置标题的大小
                fontSize: 16,
                //居中显示
                alignSelf: 'center',
            ,
            //tab 的属性
            tabBarLabel: '文章',
            tabBarIcon: (tintColor) => (
                <Image
                    source=require('./image/ic_type.png')
                    style=[height: 24, width: 24, tintColor: tintColor]
                />
            ),
        
    ,
    ShopCar: 
        screen: ShopCar,
        navigationOptions: 
            //stackNavigator的属性
            headerTitle: '消息',

            gestureResponseDistance: horizontal: 300,
            headerBackTitle: null,
            headerStyle: backgroundColor: '#cf2ceb',//导航栏的样式
            headerTitleStyle: //导航栏文字的样式
                color: 'white',
                //设置标题的大小
                fontSize: 16,
                //居中显示
                alignSelf: 'center',
            ,
            //tab 的属性
            tabBarLabel: '消息',
            tabBarIcon: (tintColor) => (
                <Image
                    source=require('./image/ic_shop_car.png')
                    style=[height: 24, width: 24, tintColor: tintColor]
                />
            ),
        
    ,
    Mine: 
        screen: Mine,
        navigationOptions: 
            //stackNavigator的属性
            headerTitle: '我的',

            gestureResponseDistance: horizontal: 300,
            headerBackTitle: null,
            headerStyle: backgroundColor: '#cf2ceb',//导航栏的样式
            headerTitleStyle: //导航栏文字的样式
                color: 'white',
                //设置标题的大小
                fontSize: 16,
                //居中显示
                alignSelf: 'center',
            ,
            //tab 的属性
            tabBarLabel: '我的',
            tabBarIcon: (tintColor) => (
                <Image
                    source=require('./image/ic_me.png')
                    style=[height: 24, width: 24, tintColor: tintColor]
                />
            ),
        
    ,

, 

    //设置TabNavigator的位置
    tabBarPosition: 'bottom',
    //是否在更改标签时显示动画
    animationEnabled: true,
    //是否允许在标签之间进行滑动
    swipeEnabled: true,
    //按 back 键是否跳转到第一个Tab(首页), none 为不跳转
    backBehavior: "none",
    //设置Tab标签的属性

    tabBarOptions: 
        //Android属性
        upperCaseLabel: false,//是否使标签大写,默认为true
        //共有属性
        showIcon: true,//是否显示图标,默认关闭
        showLabel: true,//是否显示label,默认开启
        activeTintColor: '#cf2ceb',//label和icon的前景色 活跃状态下(选中)
        inactiveTintColor: 'gray',//label和icon的前景色 活跃状态下(未选中)
        style:  //TabNavigator 的背景颜色
            backgroundColor: 'white',
            height: 55,
        ,
        indicatorStyle: //标签指示器的样式对象(选项卡底部的行)。安卓底部会多出一条线,可以将height设置为0来暂时解决这个问题
            height: 0,
        ,
        labelStyle: //文字的样式
            fontSize: 13,
            marginTop: -5,
            marginBottom: 5,
        ,
        iconStyle: //图标的样式
            marginBottom: 5,
        
    ,
);
/*
 * 初始化StackNavigator
 */
export default Navi = StackNavigator(
    Tab: 
        screen: Tab,
    ,
    Details: 
        screen: Details,
    ,
    WebViewPage: 
        screen: WebViewPage,
    ,
    Setting: 
        screen: Setting,
    ,
    /*ImageZoom: 
        screen: ImageZoom,
    ,*/

,
    //自定义界面跳转左右切换动画
    transitionConfig:()=>(
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    ),
);

调试方式:

MyReactAppliation中开启调试模式,项目根目录执行npm start启动本地服务器!


@Override
public boolean getUseDeveloperSupport() 
      return true;

打包方式:

MyReactAppliation中关闭调试模式,


@Override
public boolean getUseDeveloperSupport() 
      return false;

项目根目录执行:

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

打包方式:

点我,点我,使劲点我

更新日志:



1.支持图片缩放查看,listview上拉下拉刷新

2.react-navigation页面跳转

3.新增listview下拉上拉刷新,webview浏览网页;


源码下载链接如下,如果对您有所帮助,麻烦点个star:

https://github.com/hanxiaofeng/ReactNAndroidOne

以上是关于React Native开源一个自己入门学习的小项目的主要内容,如果未能解决你的问题,请参考以下文章

React-Native开源的入门项目 Solidot

React-Native开源的入门项目 Solidot

React Native开源项目如何运行?

学习React Native必看的几个开源项目

入门React-Native世界

入门React-Native世界