2016-01-04 16:04:53 l863784757 阅读数 17625
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁


使用React Native开发的一个仿美团首页小demo,

源码:https://github.com/lookingstars/RNMeituan


运行说明:

首先需要安装好运行React Native的相关环境,

首先需要安装好运行React Native的相关环境,

首先需要安装好运行React Native的相关环境,

参考官网

英文:https://facebook.github.io/react/docs/getting-started.html


使用 git clone https://github.com/lookingstars/RNMeituan下载源码。


1.运行前,先关掉终端(可能终端开启了其他的service)



2.初始化工程:
运行工程,如果

报错: Unable to resolve module react-timer-mixin from  ***
工程目录下执行:
npm i react-timer-mixin --save

然后关掉终端,重新运行


//这里需要执行一个命令,把包导入npm i react-timer-mixin --save
//var TimerMixin = require('react-timer-mixin');


3.运行工程
打开RNMeituan目录,双击iOS/RNMeituan.xcodeproj  启动工程。

首页:




名店抢购页:












2016-06-03 17:02:10 totogo2010 阅读数 4655
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

在Demo主要是展示一个电影信息和在ListView展示25个电影信息。

1、初始化一个项目并运行

打开终端,输入:

react-native init DemoProject

输入后初始化一个项目返回信息如下:
有时候Installing react-native package from npm…
这一步会很慢,耐心等待,没问题的。

init DemoProject
This will walk you through creating a new React Native project in /Users/iOSDev_szzc/Downloads/DemoProject
Installing react-native package from npm...
Setting up new React Native app in /Users/iOSDev_szzc/Downloads/DemoProject
react@15.0.2 node_modules/react
├── object-assign@4.1.0
├── loose-envify@1.2.0 (js-tokens@1.0.3)
└── fbjs@0.8.3 (immutable@3.8.1, ua-parser-js@0.7.10, promise@7.1.1, isomorphic-fetch@2.2.1, core-js@1.2.6)
To run your app on iOS:
   cd /Users/iOSDev_szzc/Downloads/DemoProject
   react-native run-ios
   - or -
   Open /Users/iOSDev_szzc/Downloads/DemoProject/ios/DemoProject.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd /Users/iOSDev_szzc/Downloads/DemoProject
   react-native run-android

初始化成功,cd到DemoProject目录,运行

react-native run-ios

这个运行的大概原理就是用脚本编译并打开模拟器运行,模拟器打开后大概是这样的:

这证明你第一个react native项目运行成了。

2、显示一个电影描述

在项目中打开index.ios.js文件,复制下面代码,覆盖原来的代码,保存。然后在模拟器按下 Cmd+R,就能看到效果了。

import React, {
    Component,
} from 'react';
import {
    AppRegistry,
    Image,
    StyleSheet,
    Text,
    View,
} from 'react-native';

var MOCKED_MOVIES_DATA = [
    {title: '爱丽丝梦游仙境2', year: '2016', posters: {thumbnail: 'http://pic.spider.com.cn/pic//filmpic/jdt/1462936153362_mobile2.jpg'}},
];

class DemoProject extends Component
{
    render() {
        var movie = MOCKED_MOVIES_DATA[0];
        return (
            <View style={styles.container}>
                <Text>{movie.title}</Text>
                <Text>{movie.year}</Text>
                <Image
                    source={{uri: movie.posters.thumbnail}}
                    style={styles.thumbnail}
                />
            </View>
        );
    }

};

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    thumbnail: {
        width: 53,
        height: 81,
    },
});
AppRegistry.registerComponent('DemoProject', () => DemoProject);

1.import

这里有两个import,分别是from react和react-native
react和react-native是两个东西,大家先有个概念.大概的区别,其他地方找了一个比较靠谱的解释:

ReactJs和React Native的原理是相同的,都是由js实现的虚拟dom来驱动界面view层渲染。
ReactJs是驱动html dom渲染; React Native是驱动android/ios原生组件渲染。
React 和 React Native的区别
这里写图片描述

import React, {
    Component,
} from 'react';
import {
    AppRegistry,
    Image,
    StyleSheet,
    Text,
    View,
} from 'react-native';

2.模拟数据

相当于一个全局变量

var MOCKED_MOVIES_DATA = [
    {title: '爱丽丝梦游仙境2', year: '2016', posters: {thumbnail: 'http://pic.spider.com.cn/pic//filmpic/jdt/1462936153362_mobile2.jpg'}},
];

3.组件渲染

DemoProject相当于一个组件

class DemoProject extends Component
{
    render() {
        var movie = MOCKED_MOVIES_DATA[0];
        return (
            <View style={styles.container}>
                <Text>{movie.title}</Text>
                <Text>{movie.year}</Text>
                <Image
                    source={{uri: movie.posters.thumbnail}}
                    style={styles.thumbnail}
                />
            </View>
        );
    }

};

4.样式

定义组件和组件内控件的样式,

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    thumbnail: {
        width: 53,
        height: 81,
    },
});

5.注册组件为程序入口

AppRegistry.registerComponent('DemoProject', () => DemoProject);

修改样式

改成下面这样的布局

+---------------------------------+
|+-------++----------------------+|
||       ||        Title         ||
|| Image ||                      ||
||       ||        Year          ||
|+-------++----------------------+|
+---------------------------------+

增加三个样式和修改container的样式

container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
 rightContainer: {
    flex: 1,
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
  },
  year: {
    textAlign: 'center',
  },

把return内容改为如下:

 return (
        <View style={styles.container}>
          <Image
            source={{uri: movie.posters.thumbnail}}
            style={styles.thumbnail}
          />
          <View style={styles.rightContainer}>
            <Text style={styles.title}>{movie.title}</Text>
            <Text style={styles.year}>{movie.year}</Text>
          </View>
        </View>
      );

Cmd+R刷新,效果如下

这个相当于给react native运行的web server端,不能关闭,如果关闭会模拟器提示 Could not connect to development server的。
如果不小心关闭了,运行这个命令可以启动

npm start

这里写图片描述

先写到这,一篇太长的话,会让人缺乏看下去的勇气。
这骗其实就是官网教程的一个简版和细化我认为比好的细节的版本。喜欢的同学可以直接访问官网学习:
http://facebook.github.io/react-native/docs/tutorial.html

2018-09-07 00:12:53 qq_23414675 阅读数 525
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

React Native实现仿天猫商品类目列表

前段时间在群里有人问我,类似天猫类目分类这种列表怎么实现,其实这个类目不算复杂,只要清楚这两个列表之间的关系,选择好相应的组件,开发起来还是挺简单的,只是在开发中也有几个需要注意的小细节处理

效果图预览

gif

Demo地址

https://github.com/guangqiang-liu/react-native-categoryListDemo

注意事项

  • 根类目点击时,当类目列表超过一屏时,需要滚动到列表的顶部,并且也需要将右边的分类列表滚动到顶部,天猫的目录就是这种效果
  • 控制页面的渲染时机,如果数据量很大,建议单独做些优化
  • FlatList和SectionList数据源的组装
  • 列表偏移量处理

核心源码

<FlatList
          ref={flatList => this._flatList = flatList}
          data={data}
          ListHeaderComponent={() => (<View/>)}
          ListFooterComponent={() => (<View/>)}
          ItemSeparatorComponent={() => <View style={{height:1, backgroundColor:'#F5F5F5'}}/>}
          renderItem={this._renderItem}
          onEndReachedThreshold={20}
          showsVerticalScrollIndicator={false}
          >
        </FlatList>
<SectionList
          ref={(ref) => this._sectionList = ref}
          renderSectionHeader={this.sectionComp}
          renderItem={(data) => this.renderItem(data)}
          sections={tempArr}
          ItemSeparatorComponent={() => <View/>}
          ListHeaderComponent={() => <View/>}
          ListFooterComponent={() => <View/>}
          showsVerticalScrollIndicator={false}
          keyExtractor={(item, index) => 'key' + index + item}
        />
// 设置列表的偏移量
_renderItem = item => {
    let index = item.index
    let title = item.item.title
    return (
      <TouchableOpacity
        key={index}
        style={[{alignItems: 'center', justifyContent: 'center', width: 100, height: 44}, this.state.selectedRootCate === index ? {backgroundColor: '#F5F5F5', borderLeftWidth: 3, borderLeftColor: 'red'} : {backgroundColor: 'white'}]}
        onPress={() => {
          (CateData.data.length - index) * 45 > height - 65 ? this._flatList.scrollToOffset({animated: true, offset: index * 45}) : null
          this._sectionList.scrollToLocation({itemIndex: 0, sectionIndex: 0, animated: true, viewOffset: 20})
          this.setState({selectedRootCate: index})
        }}
      >
        <Text style={{fontSize: 13, color: this.state.selectedRootCate === index ? 'red' : '#333'}}>{title}</Text>
      </TouchableOpacity>
    )
  }

更多文章

  • 作者React Native开源项目OneM【500+ star】地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/OneM:欢迎小伙伴们 star
  • 作者简书主页:包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们:多多关注多多点赞
  • 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
  • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(*620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢大家支持!*

小伙伴们扫下方二维码加入RN技术交流QQ群

QQ群二维码,500+ RN工程师在等你加入哦

2019-04-07 14:16:06 qq_37021554 阅读数 302
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

前置条件:

  1. 安装好react-native,通过 react-native init xxxproject
  2. 再react-native run-android运行
  3. 安装好react-navigation相关可以看官网的文档。

文件目录:

其中几个Page页面都只是页面对应字改了一下而已。

 

AppNavigator.js

import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';

import WelcomePage from '../pages/WelcomePage'
import DetailPage from '../pages/DetailPage'
import HomePage from '../pages/HomePage'

const MainNavigator = createStackNavigator({
  HomePage: {
    screen:HomePage,
    navigationOptions: {
      header: null
    }
  },
  DetailPage: {
    screen:DetailPage
  }
});
const InitNavigator = createStackNavigator({
   WelcomePage: {
    screen:WelcomePage,
    navigationOptions: {
      header: null
    }
  }
});

export default createAppContainer(createSwitchNavigator(
  {
    Init: InitNavigator,
    Main: MainNavigator,
  },
  {
    initialRouteName: 'Init',
  }
));

SwitchNavigator 的用途是一次只显示一个页面。 默认情况下,它不处理返回操作。我们可以通过它做一个一开始初始化欢迎页面,以及后续展示页面。

header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为null

 

welcomePage.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import NaivgationUtil from '../navigator/NavigationUtil';

type Props = {};
export default class WelcomePage extends Component <Props> {
    componentDidMount() {
        this.timer = setTimeout(() => {
            NaivgationUtil.resetToHomePage({
                navigation: this.props.navigation
            })
        }, 2000);
    }
    componentWillUnmount() {
        this.timer&&clearTimeout(this.timer);
    }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>WelcomePage</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

通过挂载定时器来定时跳转,同时记得销毁定时器。

NaivgationUtil.js 

作为一个util文件 需要的公共方法的提取

export default class NaivgationUtil {
    static goPage(params, page) {
        const navigation  = NaivgationUtil.navigation;
        if(!navigation) {
            console.log('navigation can not be null')
            return;
        }
        navigation.navigate(
            page,
            {
                ...params
            }
        )
    }
    static goBack(navigation) {
        navigation.goback();
    }
    static resetToHomePage(params) {
        const { navigation } = params;
        navigation.navigate('Main');
    }
};

同时需要将index.js入口文件进行修改一下

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import AppNavigator from './js/navigator/AppNavigator'
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => AppNavigator);

接着需要一个顶部的tab

tab.js

tab中引入了需要的页面.

icons用了react-native-vector-icons 里面的三个类。安装react-native-vectors-icons 除了npm 以外还需要react-native link react-native-vector-icons 来进行自动关联。

方法较为类似,有screen对应页面,以及options对应的其他选项的配置,包含标题,icon。

import React from 'react';
import {
    createBottomTabNavigator,
    createAppContainer
} from 'react-navigation';

import FavoritePage from './FavoritePage';
import MyPage from './MyPage';
import PopularPage from './PopularPage';
import TrendingPage from './TrendingPage';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

const TabNavigator = createBottomTabNavigator({
    FavoritePage: {
        screen: FavoritePage,
        navigationOptions: {
            tabBarLabel: "收藏",
            tabBarIcon: ({tintColor, focused}) => (
                <MaterialIcons
                    name={'favorite'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    },
    MyPage: {
        screen: MyPage,
        navigationOptions: {
            tabBarLabel: "我的",
            tabBarIcon: ({tintColor, focused}) => (
                <FontAwesome
                    name={'user'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }        
    },
    PopularPage: {
        screen: PopularPage,
        navigationOptions: {
            tabBarLabel: "最热",
            tabBarIcon: ({tintColor, focused}) => (
                <MaterialIcons
                    name={'whatshot'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    },
    TrendingPage: {
        screen: TrendingPage,
        navigationOptions: {
            tabBarLabel: "趋势",
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={'md-trending-up'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }   
    },
});

export default createAppContainer(TabNavigator);

 top.js

同样和底部较为类似。


import {
    createMaterialTopTabNavigator, createAppContainer
} from 'react-navigation';

import Tab1 from './Tab1';
import Tab2 from './Tab2';
const TabNavigator = createMaterialTopTabNavigator({
    PopularTab1: {
        screen: Tab1,
        navigationOptions: {
            tabBarLabel: "tab1"
        }
    },
    PopularTab2: {
        screen: Tab2,
        navigationOptions: {
            tabBarLabel: "tab2"
        }
    }
});

export default createAppContainer(TabNavigator);

最后还有一个详情页面的跳转:

tab1.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

type Props = {};
import NavigatorUtil from '../navigator/NavigationUtil'
export default class Tab1 extends Component <Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>PopularPage1</Text>
        <Text onPress={() => {
            NavigatorUtil.goPage({
                navigation: this.props.navigation
            }, "DetailPage")
        }}>跳转到详情页</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

 

结果显示:

demo下载:

https://download.csdn.net/download/qq_37021554/11094521 

2017-11-03 11:40:38 u010696783 阅读数 394
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

学习React Native一段时间了,做了个简单Demo,分享出来,督促自己。
先上效果图:
这里写图片描述
这里写图片描述

主要组件:
react-native-tab-navigator
react-native-scrollable-tab-view
react-native-side-menu
react-native-swiper
react-native-wechat

git地址:https://github.com/SandyBoy/ReactNativeDemo

React Native官方DEMO

阅读数 3735

react-native 组件demo

阅读数 809

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