2017-11-01 11:18:57 qq_31303013 阅读数 602
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

最近开始学习React-native ,遇到底部导航  ,一直在报错误。

最后找到解决办法,快被整哭啦。。。。

  第一步 导入框架,npm install react-native-tab-navigator --save

第二步;在用到react-native-tab-navigator 的页面

import TabNavigator from 'react-native-tab-navigator';
第三步:构造方法

constructor(props) {
  super(props);
  // 初始状态
  this.state = {
      selectedTab:'home'
  };

}
第四步:

// 返回TabBarItem
renderTabBarItem(title, selectedTab, image, selectedImage, view ) {
    return(
        <TabNavigator.Item
            selected={this.state.selectedTab === selectedTab}
            title={title}
            selectedTitleStyle={{color:'black'}}
            renderIcon={() => <Image source={{uri:image}} style={styles.tabbarIconStyle} />}
            renderSelectedIcon={() => <Image source={{uri:selectedImage}} style={styles.tabbarIconStyle} />}
            onPress={() => this.setState({ selectedTab: selectedTab })}>
                {view}  //不需要用到Navigator,直接把需要的页面加进来就可以了
                      
        </TabNavigator.Item>
    );
}
第五步:
render() {
    return (
        <TabNavigator>
            {/* 首页 */}
            {this.renderTabBarItem("首页",'home','tabbar_home_30x30','tabbar_home_selected_30x30',<GDHome />)}
            {/* 海淘 */}
            {this.renderTabBarItem("海淘",'ht','tabbar_abroad_30x30','tabbar_abroad_selected_30x30',<GDHt />)}
            {/* 小时风云榜 */}
            {this.renderTabBarItem("小时风云榜",'hourlist','tabbar_rank_30x30','tabbar_rank_selected_30x30',<GDHourList/>)}
        </TabNavigator>
    );
}






2017-05-04 15:36:55 cangsangxi 阅读数 907
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

1.安装下载:

npm install react-native-scrollable-tab-view --save
2. 导入安装的组件:

import ScrollableTabView, {DefaultTabBar } from 'react-native-scrollable-tab-view'

3. 导入每个分栏对应的页面,这里需要你自己定义这几个页面,每个栏的页面都是独立分开的

import TakeOut from './TakeOut'
import Breakfast from './Breakfast'

4. 就像这样把每个页面看成一个组件调用他们就行了。但是要包在ScrollableTabView里面,

其中DefaultTabBar:Tab会平分在水平方向的空间

还可以有其他选项比如:

ScrollableTabBar:Tab可以超过屏幕范围,滚动可以显示

top:位于屏幕顶部

bottom:位于屏幕底部

overlayTop:位于屏幕顶部,悬浮在内容视图之上

 

<View style={styles.tab}>
     <ScrollableTabView renderTabBar={() => <DefaultTabBar />}

       tabBarUnderlineColor='#FF0000'
       tabBarBackgroundColor='#FFFFFF'
       tabBarActiveTextColor='#9B30FF'
       tabBarInactiveTextColor='#7A67EE'
       tabBarTextStyle={{fontSize: 18}}
    >
      <TakeOut tabLabel="外卖"/>
      <Breakfast tabLabel="早餐"/>
    </ScrollableTabView>
</View>

look:帅不帅?


2019-03-18 23:55:06 u010047432 阅读数 2153
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

这里先说明一下,由于本博主在创建项目的时候RN的0.59.1刚发布,以RN的一贯尿性必然要会存在不少问题,亲测RN的0.59.1会提示javascript版本与react-native版本不匹配,退回到0.58的最后一个版本0.58.6之后,运行正常。

接下来进入主题,说下遇到问题和解决问题的过程:
在初始化创建项目并通过yarn add react-navigationyarn add react-native-gesture-handler加载导航依赖包时,这两个过程一切正常,但当执行react-native link react-native-gesture-handler进行原生依赖时,喜出望外了+_+!!!:
不废话,直接上解决办法:执行npm install react-native-gesture-handler@latest --save ,然后重新link:react-native link react-native-gesture-handler
error Failed to get dependency config
更新之后:在这里插入图片描述
这应该是yarn对包的管理存在问题导致的…,遇到步骤都按官方要求执行完亦然莫名其妙报错,可以试试不用yarn而用npm来进行包的管理。

2017-01-11 14:01:26 jing85432373 阅读数 8768
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

1.下载

npm install react-native-tab-navigator –save下载

2. 导入

import TabNavigator from 'react-native-tab-navigator'
3. 完整代码

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'
import PosRN from '../index.ios'
import Mine from './mine'
import Cart from './cart'

export default class Main extends Component {

    constructor(props){
        super(props)
        this.state={
            selectedTab:'首页',
        }
    }


    render() {
        return (
            <View style={styles.container} >
                <TabNavigator>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '首页'}
                        title="首页"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../images/ic_home_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_home_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        <PosRN/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '购物车'}
                        title="购物车"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../images/ic_cart_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_cart_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '购物车' })}>
                        <Cart />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '我的'}
                        title="我的"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../images/ic_user_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_user_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '我的' })}>
                        <Mine />
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabText: {
        color: "#000000",
        fontSize: 13
    },
    selectedTabText: {
        color: "#999999",
        fontSize: 13
    },
    icon: {
        width: 20,
        height: 20
    }
});


2019-11-29 18:06:56 qq_33721382 阅读数 22
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

 

功能层面

1、页面导航

react-native-navigation:https://reactnavigation.org/docs/en/3.x/getting-started.html

 

2、状态管理

mobx, mobx-react:https://cn.mobx.js.org/refguide/api.html

 

3、持久存储

react-native-storage:https://github.com/sunnylqm/react-native-storage/blob/HEAD/README.zh-CN.md

 

4、消息推送

react-native-aliyun-push:https://github.com/wonday/react-native-aliyun-push

 

5、国际化

react-native-i18n:https://github.com/AlexanderZaytsev/react-native-i18n

 

6、设备信息

react-native-device-info:https://github.com/react-native-community/react-native-device-info

 

7、Base64转码解码

js-base64:https://github.com/dankogai/js-base64

 

8、网络请求操作库

axios:https://www.kancloud.cn/yunye/axios/234845

 

9、文件系统

react-native-fs:https://github.com/itinance/react-native-fs

 

10、热更新

react-native-code-push:https://github.com/Microsoft/react-native-code-push

 

 

UI组件层面

1、tab组件

react-native-scrollable-tab-view:https://github.com/ptomasroos/react-native-scrollable-tab-view

 

2、相机

react-native-camera:https://github.com/react-native-community/react-native-camera

 

3、滑动删除组件

react-native-swipe-list-view:https://github.com/jemise111/react-native-swipe-list-view

 

 

一站式UI组件库

1、@ant-design/react-native(阿里出品)

https://rn.mobile.ant.design/changelog-cn

 

2、native-base

https://nativebase.io/

 

3、teaset

https://github.com/rilyu/teaset/blob/HEAD/docs/cn/README.md

 

 

 

React-native开源库检索网址:https://js.coach/?collection=React+Native

里边有很多开源库。

 

RN学习资源:https://github.com/jondot/awesome-react-native

 

没有更多推荐了,返回首页