react native基础(三)

一.WebView

创建一个原生的WebView，可以用于访问一个网页或者一段html

属性:

source{uri: string,method: string,headers: object,body: string},{html: string,baseUrl: string},number在WebView中载入一段静态的html代码或是一个url（还可以附带一些header选项）。

eg:

automaticallyAdjustContentInsets={true} //头部莫名出现空白的解决
source={{html:this.state.text}}或者source={{uri:url,method:"GET"}} //网页路径或者html片段

更多查看官网............

二.判断当前系统

import {
    AppRegistry,StyleSheet,Text,View,Image,Navigator,Platform,//判断当前运行的系统
} from 'react-native’;
//样式判断
const styles = StyleSheet.create({
    tabIconHome:{
        width:Platform.OS==="ios"?30:25,height:Platform.OS==="ios"?30:25
    }
});


//js判断
if(Platform.os===“ios”){
   console.log(我是苹果系统)
}

三AsyncStorage(详细用法看官网)

AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。它用来代替LocalStorage。

我们推荐您在AsyncStorage的基础上做一层抽象封装，而不是直接使用AsyncStorage。

译注：推荐由React Native中文网封装维护的react-native-storage模块，提供了较多便利功能。

四.安卓日期选择器和时间选择器(DataPickerAndroid和TimePickerAndroid)

/**
 *
 *  安卓的日期和时间选择器
 *
 *
 */

import React,{ Component } from 'react';
import {
  AppRegistry,DatePickerAndroid,TimePickerAndroid
} from 'react-native';

class DateAndTimePickerAndroidDemo extends Component {
  render() {
    return (
             <View>
                 <Text style={{marginTop:100}} onPress={this.openDate}>点我打开日期选择</Text>
                 <Text style={{marginTop:100}} onPress={this.openTime}>点我打开时间选择</Text>
             </View>
    );
  }
  //安卓日期选择
  openDate(){
       let today=new Date();//默认显示的日期
       let minDate=new Date(2015,1,1);//最小日期.安卓低于5.0设置会异常，建议不要设置
       let maxDate=new Date(2025,1);//最小日期.安卓低于5.0设置会异常，建议不要设置
       let option={
           date:today,//默认显示的日期
           minDate:minDate,maxDate:maxDate,mode:"default"  //设置选择器的模式。有calendar,spinner,default
       }
       DatePickerAndroid.open(option).then(
           result=>{
               if(result.action===DatePickerAndroid.dismissedAction){
                   alert("用户没有选择日期")
               }else{
                   alert(result.year+"年"+(result.month+1)+"月"+result.day+"日")
               }
           }
       )
  }
 //安卓时间选择
  openTime(){
      let hour=22;//要显示的小时，默认为当前的时间
      let minute =20;//要显示的分钟，默认为当前的时间
      let is24Hour=true;
      let option={
          hour:hour,//默认显示的时间
          minute:minute,is24Hour:is24Hour,}
      TimePickerAndroid.open(option).then(
          result=>{
              if(result.action===TimePickerAndroid.dismissedAction){
                  alert("用户没有选择时间")
              }else{
                  alert(result.hour+"小时"+(result.minute+1)+"分")
              }
          }
      )
  }
}

五.IOS日期和时间选择(DatePickerIOS)

/**
 *
 *  ios的日期和时间选择器
 *
 *
 */

import React,DatePickerIOS
} from 'react-native';

class DateAndTimePickerIOSDemo extends Component {
  constructor(props){
    super(props)
      this.state={
        date:new Date()
      }
  }
  render() {
    return (
             <View>
                 <DatePickerIOS
                    date={this.state.date}  //当前被选中的日期
                    mode={"date"}  //方式，可选data，time,datatime
                    onDateChange={(d)=>{
                        this.setState({
                            date:d
                        })
                    }}
                 />
                 <DatePickerIOS
                     date={this.state.date}  //当前被选中的时间
                     mode={"time"}  //方式，可选data，time,datatime
                     onDateChange={(d)=>{
                         this.setState({
                             date:d
                         })
                     }}
                 />
                 <DatePickerIOS
                     date={this.state.date}  //当前被选中的日期时间
                     mode={"datetime"}  //方式，可选data，time,datatime
                     onDateChange={(d)=>{
                         this.setState({
                             date:d
                         })
                     }}
                 />
             </View>
    );
  }

六.IOS上分享和弹出多项选择--ActionSheetIOS

效果:

/**
 *
 *  IOS   ActionSheet弹出框和分享框
 *
 */

import React,ActionSheetIOS
} from 'react-native';

class ActionSheetDemo extends Component {
  render() {
    return (
        <View>
            <Text style={{marginTop:100}}
            onPress={this.openActionSheetIOS}
            >点击我打开ActionSheet弹出框</Text>

            <Text style={{marginTop:100}}
                  onPress={this.openShare}
            >点击我打开分享框</Text>
        </View>
    );
  }
  //多项选择弹出框
  openActionSheetIOS(){
      ActionSheetIOS.showActionSheetWithOptions({
          options:["拨打电话","发送邮件","发送短信","取消"],cancelButtonIndex:3,//取消按钮的位下标
          destructiveButtonIndex:3,//高亮按钮的下标
          title:"做何操作",message:"要想清楚"
      },function(index){
        alert(index)
      })
  }
  //分享框
  openShare(){
      ActionSheetIOS.showShareActionSheetWithOptions({
            message:"我是分享",url:"http://www.reactnative.vip"
          },function(err){
            alert(err)
          },function(succ){
              alert(succ)
          })
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!