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开源一个自己入门学习的小项目的主要内容,如果未能解决你的问题,请参考以下文章