• 在IOS开发中,ActionSheet提供了这样的功能,而React Native同样封装了该功能,那就是ActionSheetIOS提供了两个静态方法:static showActionSheetWithOptions(options,callback):在iOS设备上显示一个ActionSheet弹出...

    需求:分享和弹出多项选择操作!在IOS开发中,ActionSheet提供了这样的功能,而React Native同样封装了该功能,那就是ActionSheetIOS

    提供了两个静态方法:

    static showActionSheetWithOptions(options,callback):

    在iOS设备上显示一个ActionSheet弹出框,其中options参数为一个对象,其属性必须包含以下一项或多项:

    options(字符串数组) - 一组按钮的标题(必选)

    cancelButtonIndex(整型) - 选项中取消按钮所在的位置(索引)

    destructiveButtonIndex(整型) - 红色高亮显示的位置(索引)

    title(字符串) - 弹出框顶部的标题

    message(字符串) - 弹出框顶部标题下方的信息

    static showShareActionSheetWithOptions(options,failureCallback,successCallback):

    在iOS设备上显示一个分享弹出框,其中options参数为一个对象,其属性必须包含以下一项或多项:

    message(字符串) - 要分享的信息

    url(字符串) - 要分享的URL地址

    注:如果url指向本地文件,或者是一个base64编码的url,则会直接读取并分享相应的文件。你可以用这样的方式来分享图片、视频以及PDF文件等。

    source code:
    /**
    * Sample React Native App
    * https://github.com/facebook/react-native
    * @flow
    */

    import React, { Component } from ‘react’;
    import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ActionSheetIOS,
    } from ‘react-native’;

    class demo extends Component {

    render() {
    return (

      <Text style={styles.item} onPress={this.tip} > showActionsHEETwITHoPTIons</Text>
      <Text style={styles.item} onPress={this.share} > showShareActionSheetWithOptions</Text>
    
      </View>
    );
    

    }

    tip(){
    ActionSheetIOS.showActionSheetWithOptions(
    {
    options:[‘tel’,’email’,’sms’,’cancel’],
    cancelButtonIndex:3,
    destructiveButtonIndex:0,
    title:’which operation?’,
    message:’think carefully’,
    },
    function(index){
    alert(index);

    }
    

    );
    }

    share(){
    ActionSheetIOS.showShareActionSheetWithOptions(
    {
    message:’我的论坛’,
    url:’http://www.reactnative.vip
    },
    function(err){
    alert(err);
    },
    function(suc){
    alert(suc);
    }
    )
    }

    }

    const styles = StyleSheet.create({
    container: {
    flex: 1,

    },
    flex:{
    flex:1,
    },
    item:{
    marginTop:10,
    marginLeft:5,
    marginRight:5,
    height:30,
    borderWidth:1,
    padding:6,
    borderColor:’#ddd’,

    }
    });

    AppRegistry.registerComponent(‘demo’, () => demo);

    展开全文
  • 46、手把手教React Native实战之开源组件react-native-camera推荐一个跨平台的rn-camera-roll:https://www.npmjs.com/package/rn-camera-rollA Camera component for React Native. Also supports barcode scanning...

    46、手把手教React Native实战之开源组件react-native-camera

    推荐一个跨平台的rn-camera-roll:https://www.npmjs.com/package/rn-camera-roll

    A Camera component for React Native. Also supports barcode scanning!二维码扫描

    原生Android Zxing google

    rnpm link不是安装,而是添加原生依赖,对应的组件已经安装好了才能rnpm link

    通过这个例子来理解下react native的架构:js环境 jsBridge native环境

    业务逻辑是reactJs处理 ui用react写 但实际桥接成native

    ref的两种属性:String属性 回调属性(组件render渲染完成后的回调)

    官网:https://facebook.github.io/react … -callback-attribute

    this callback will be executed immediately after the component is mounted(组件render之后DidMount之前)

    展开全文
  • 1 npm install react-native-side-menu –save 2

    1 npm install react-native-side-menu –save
    2

    注意:menu组件里面,使用ScrollView一定要设置 scrollsToTop={false}

    展开全文
  • github上搜索 react-native-swiper 车博士互联网驾校平台

    github上搜索 react-native-swiper

    在项目的根目录(即package.json文件所在的目录)

    npm的命令:

    安装模块:npm i react-native-swiper –save

    查看模块:npm view react-native-swiper

    删除模块:npm rm react-native-swiper –save

    查看帮助命令:npm help 命令


    homeUI.js

    /**
    * Sample React Native App
    * https://github.com/facebook/react-native
    */

    import React, { Component } from ‘react’;
    import {
    AppRegistry,
    StyleSheet,

    Text,
    
    Image,
    View
    } from 'react-native';
    

    import Swiper from ‘react-native-swiper’;
    //var REQUEST_URL=”https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json”;

    export default class HomeUI extends Component{

    constructor(props){
    super(props);//这一句不能省略,照抄就行

    }

    render(){
    
    
        return (
            <Swiper style={styles.wrapper} showsButtons={true}  index = {1} autoplay={true}>
                <View style={styles.slide1}>
    
                    <Image
    
                        style={{width:200,height:300}}
                        resizeMode='stretch'
                        source={{uri:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'}}
                        />
                </View>
                <View style={styles.slide2}>
                    <Text style={styles.text}>Beautiful</Text>
                </View>
                <View style={styles.slide3}>
                    <Text style={styles.text}>And simple</Text>
                </View>
            </Swiper>
    
        );
    
    }
    

    }

    const styles = StyleSheet.create({
    wrapper: {
    },
    slide1: {
    flex: 1,
    justifyContent: ‘center’,
    alignItems: ‘center’,
    backgroundColor: ‘#9DD6EB’,
    },
    slide2: {
    flex: 1,
    justifyContent: ‘center’,
    alignItems: ‘center’,
    backgroundColor: ‘#97CAE5’,
    },
    slide3: {
    flex: 1,
    justifyContent: ‘center’,
    alignItems: ‘center’,
    backgroundColor: ‘#92BBD9’,
    },
    text: {
    color: ‘#fff’,
    fontSize: 30,
    fontWeight: ‘bold’,
    }
    });

    展开全文
  • 【原创】东方耀reactnative 视频31之-开源导航组件 react-native-tab-navigator

    1 npm install react-native-tab-navigator –save
    2 import TabNavigator from ‘react-native-tab-navigator’;
    3 homeUI.js
    /**
    * Sample React Native App
    * https://github.com/facebook/react-native
    */

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

    import TabNavigator from ‘react-native-tab-navigator’;

    class HomeUI extends Component {

    constructor(props) {
        super(props);//这一句不能省略,照抄即可
        this.state = {
    
            selectedTab: 'home',
        };
    }
    
    
    
    
    
    render() {
    
        var homeView = (
    
            <View style={[styles.flex, styles.center,{backgroundColor:'#ffff0044'}]}>
                <Text style={{ fontSize: 22 }}>我是主页</Text>
            </View>
        );
    
    
        var settingView = (
    
            <View style={[styles.flex, styles.center,{backgroundColor:'#ff000044'}]}>
                <Text style={{ fontSize: 22 }}>我是设置页面</Text>
            </View>
        );
    
    
        return (
    
            <TabNavigator
             tabBarStyle={{ height: 60 }}
            >
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'home'}
                    title="主页"
                    renderIcon={() => <Image style={styles.img} source={require('./home_tab_home_normal.png') }/>}
                    renderSelectedIcon={() => <Image style={styles.img} source={require('./home_tab_home_pressed.png') }/>}
                    badgeText="200"
    
                   onPress={() => this.setState({ selectedTab: 'home' })}
    
                    >
                    {homeView}
                </TabNavigator.Item>
    
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'setting'}
                    title="设置"
                    renderIcon={() => <Image style={styles.img} source={require('./home_tab_setting_normal.png') }/>}
                    renderSelectedIcon={() => <Image style={styles.img} source={require('./home_tab_setting_pressed.png') }/>}
                    renderBadge={() => <Text>东方耀</Text>}
                    onPress={() => this.setState({ selectedTab: 'setting' })}
    
                    >
    
                    {settingView}
                </TabNavigator.Item>
    
    
            </TabNavigator>
    
    
        );
    
    }
    

    }

    const styles = StyleSheet.create({

    flex: {
        flex: 1,
    },
    
    
    
    
    img: {
        width: 40,
        height: 33,
    },
    
    center: {
        justifyContent: 'center',
        alignItems: 'center',
    
    
    },
    

    });

    module.exports = HomeUI;

    4.index.android.js
    /**
    * Sample React Native App
    * https://github.com/facebook/react-native
    */

    import React, { Component } from ‘react’;
    import {
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
    ViewPagerAndroid,
    Navigator,
    View
    } from ‘react-native’;

    import LikeCount from ‘./LikeCount.js’;//导入喜欢数 组件
    import Button from ‘./Button.js’;//导入 自定义的按钮的 组件
    import HomeUI from ‘./HomeUI.js’;//导入 首页 组件

    const PAGES=5;

    const BGCOLOR=[‘#fdc08e’, ‘#fff6b9’, ‘#99d1b7’, ‘#dde5fe’, ‘#f79273’];

    const IMAGE_URIS=[
    http://apod.nasa.gov/apod/image/1410/20141008tleBaldridge001h990.jpg‘,
    http://apod.nasa.gov/apod/image/1409/volcanicpillar_vetter_960.jpg‘,
    http://apod.nasa.gov/apod/image/1409/m27_snyder_960.jpg‘,
    http://apod.nasa.gov/apod/image/1409/PupAmulti_rot0.jpg‘,
    https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png‘,
    ];

    class ProgressBar extends Component{
    //进度条组件
    constructor(props) {
    super(props);

    }
    render(){
    //当前位置+偏移量
    var fractionalPosition = (this.props.progress.position + this.props.progress.offset);

    var progressBarSize = (fractionalPosition / (PAGES - 1)) * this.props.size;
    return(
      //这进度条 2个view搞定了 通过宽度来区别
      //progressBarSize当前的进度
      //this.props.size总共的大小 或者 是进度的长度
        <View style={[styles.progressBarContainer, {width: this.props.size}]}>
    
          <View style={[styles.progressBar, {width: progressBarSize}]}/>
    
        </View>
    );
    

    }
    }

    class WelcomeUI extends Component {
    //引导页 或者 欢迎界面 用viewpager实现

    //null is not an object 解决办法:初始化的时候要用constructor 而不是getInitialState
    //current using ES6 as standart programming.

    //to initial state you must create cnostructor in your react component class

    //用构造函数来替代之前的 Initial实例化

    constructor(props) {
    super(props);
    this.state = {
    page: 0,
    animationsAreEnabled: true,//动画是否开启
    progress: {
    position: 0,
    offset: 0,
    },
    };

    //undefined is not a function (evaluating
    //React components using ES6 classes no longer autobind this to non React methods
    
    //this.setState=this.setState.bind(this);
    

    }

    //getInitialState(){
    // return {
    // page: 0,
    // animationsAreEnabled: true,
    // progress: {
    // position: 0,
    // offset: 0,
    // },
    // };
    //}

    onPageSelected=(e)=>{
    //这个回调会在页面切换完成后(当用户在页面间滑动)调用
    //回调参数中的event.nativeEvent对象
    this.setState({page:e.nativeEvent.position});
    }

    //onPageScroll(e){
    // //当在页间切换时(不论是由于动画还是由于用户在页间滑动/拖拽)执行。
    // this.setState({progress:e.nativeEvent});
    //}

    //See React on ES6+
    onPageScroll=(e)=>{
    //当在页间切换时(不论是由于动画还是由于用户在页间滑动/拖拽)执行。

    // 回调参数中的event.nativeEvent对象会包含如下数据:
    //
    //position 从左数起第一个当前可见的页面的下标。
    //
    //offset 一个在[0,1)(大于等于0,小于1)之间的范围,代表当前页面切换的状态。值x表示现在”position”所表示的页有(1 - x)的部分可见,而下一页有x的部分可见。
    this.setState({progress:e.nativeEvent});
    }

    move(delta){
    var page=this.state.page+delta;
    this.go(page);
    }

    go(page){
    if(this.state.animationsAreEnabled){
    this.viewPager.setPage(page);
    }else{
    this.viewPager.setPageWithoutAnimation(page);
    }
    //刷新了
    this.setState({page});
    }

    onClick=()=>{
    //alert(‘点击了’);
    const { navigator } = this.props;
    //为什么这里可以取得 props.navigator?请看上文:
    //

    展开全文
  • 重点理解:为什么rn中会有WebView?
  • React-native 签名打包
  • 日期时间选择器 在IOS中是以组件的形式 DatePickerIOS支持View组件的所有属性,可以设置他的宽度、高度、位置等这是一个受约束的(Controlled)组件,所以你必须监听onDateChange回调函数并且及时更新date属性来使得...
  • 6 jsx转换解析器 输入 转换为 React.createElement(“h3”,null,”输入”) 返回一个ReactElement对象
  • RN学习网站: ReactNative官网:...ReactNative中文网:http://reactnative.cn/ 江清清RN技术专栏:http://www.lcode.org/react-native/(环境搭建,基础组件和常用API学习,RN开源项目,技术周报...)
  • 41、手把手教React Native实战之API学习DatePickerAndroid与TimePickerAndroid日期、时间选择器 Android中是以api的形式,IOS是以组件的形式DatePickerAndroid:static open(options: Object) 打开一个标准的Android...
  • React-Native中Modal的使用 /** * React Native App * dongtao 2017/04/22 * @flow */ import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, Modal, PixelRatio, View} from 'rea...
  • react-native-side-menu

    2018-11-12 20:22:02
    DfyProject01 ... * Sample React Native App * https://github.com/facebook/react-native */ import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, Image, ...
  • 一、React: 1.React英文网:http://reactjs.cn 2.React中文导航:http://nav.react-china.org 3.ReactReact Native讨论区:http://react-china.org 4.React菜鸟教程:http://www.runoob.com/react/react-props.html 5....
  • 本系列教程是学习东方耀老师的课程中按照教程写的课堂笔记,基础控件的使用其实与Android及iOS类似,并没有太大的区别,因此此处只记录代码,不做更多分析,等后期项目实战阶段再详细分析。 代码如下: import...
  • CameraRoll模块提供了对手机中保存的图片、视频文件进行遍历访问与操作。 提供两个静态方法static getPhotos(params: object)可以得到手机中所有的图片和视频(不仅仅是使用摄像头拍摄的照片、视频,还有各个应用...
  • 课程序号标题第0课0、手把手教React Native实战之开山篇_视频第1课1、手把手教React Native实战之环境搭建_视频_Windows环境第1课1、手把手教React Native实战之环境搭建【Mac真机】同时调试开发Android&...
  • 看了东方耀老师的视频,跟着记下了以下笔记,其实和东方耀老师的课堂笔记差不多,增加了一点细节 1. 生成一个签名密钥:在项目目录下运行keytool -genkey -v -keystore my-release-key.keystore -alias my-key-...
  • 本系列教程是学习东方耀老师的课程中按照教程写的课堂笔记,基础控件的使用其实与Android及iOS类似,并没有太大的区别,因此此处只记录代码,不做更多分析,等后期项目实战阶段再详细分析。 界面上有两个按钮,...
1 2 3 4
收藏数 74
精华内容 29
关键字:

46 东方耀react-native