2018-10-16 21:09:08 u011068702 阅读数 98
  • 完全征服React Native

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

    57468 人正在学习 去看看 李宁

1 React Native里面一般导出函数或者常量或者组件

  如果是默认组件或者类(export default修饰)的话,在另外一个地方导入的时候不需要加上{},格式如下
  导出

  export default class Student {
  }

  导入

 import Student from "./file"

  如果不是默认组件或类或则方法或则变量(没有用default修饰)的话,在另外一个地方导入的时候需要加上{},格式如下
  导出:使用module.exports

  module.exports = {fun1, fun2, 常量}

  导入

 import {xxx2, xxx2, ...} from "./file"

 

好处:在另外一个文件地方导入了,就可以使用导入的函数或者变量或者组件,非常方便,相当于java里面的import导入类文件一样.

还可以是用一个变量,然后变量里面放键值对数组,key是函数名字,value是函数实现

如下

let fun = {fun1 : (a, b) => {return a + b}, fun2 : (a, b) => {return a - b}} 

export default fun;

 

 

 

 

2 简单测试

  Student.js文件如下

'use strict';

import React from 'react'

class Student {
    constructor(name: string) {
	this.name = name;
    }
    _getName = () => {
	console.log("_getName");
	return this.name;
    };
}

export default Student


  Fun.js文件如下

'use strict';

import React from 'react'

const sum = (a, b) => {
	return a + b;
}

const sub = (a, b) => {
	return a - b;	
}

const myName = 'chenyu';


module.exports = {
	sum,
	sub,
	myName
}


Fun_second.js文件如下

'use strict';

import React from 'react'

//我们把所有的函数放在一个变量里面,这个变量里面放的都是键值对,
//然后key是函数名字,value是我们函数实现
let fun = {  //记得这是是let fun = { },不是let fun {} 
	//相加函数
	sum : (a, b) => {
	    return a + b;	
	},	
	//相减函数
	sub : (a, b) => {
		return a - b;	
	}
}

export default fun;

 

 

App.js文件如下

import React from 'react';
import {View, Text} from 'react-native';
import {DeviceEventEmitter} from "react-native";

import Student from "./Student"
import {sub, sum, myName} from "./Fun"
import fun from "./Fun_second"

export default class App extends React.Component {
        
       constructor(props) {
          super(props); 
          this.state = {
		name: '点击我',
		sumRes: 'sumRes',
		subRes: 'subRes',
		stuName: 'hello',
		sumRes_sec: 'sumRes_sec',
		subRes_: 'subRes_'
	  };
       }

       render() {
          return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
              <Text
        	  onPress={() => this._press(5, 2)}
               >{this.state.name}</Text>
			  
              <Text>{this.state.sumRes}</Text>
              <Text>{this.state.subRes}</Text>
              <Text>{this.state.stuName}</Text>
              <Text>{this.state.sumRes_sec}</Text>
              <Text>{this.state.subRes_}</Text>
            </View>
          );
       }
       
	   _press = (a, b) => {
		   this.setState({name: myName});
		   let res = sum(a, b);
		   console.log("res is:" + res);
		   this.setState({sumRes : res});
		   let res1 = sub(a, b);
		   console.log("res1 is:" + res1);
      	   this.setState({subRes : res1});
		   let student = new Student("chengongyu");
		   let studentName = student._getName();
		   this.setState({stuName : studentName});
		   let sumSec = fun.sum(4, 9);
		   this.setState({sumRes_sec : sumSec});
		   let subSec = fun.sub(10, 2);
		   this.setState({subRes_: subSec});
	  }

       
}

  
  

 

 

 

3 运行结果

点击 '点击我'之后效果如下

 

2016-08-20 12:11:12 qq_28523871 阅读数 728
  • 完全征服React Native

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

    57468 人正在学习 去看看 李宁

React Native入门基础——Props

JSX和JS
一.Props(属性)
大多数组件在创建的时候就可以用各种参数来进行定制。用于定制的这些参数就称为props(属性)

二.Props例子
1.Image组件

 render(){
    let pic = {
     uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (<Image source = {pic} style={{width: 193,height: 110}}/>);
  }

分析:
{}:把任意合法的JavaScript表达式通过括号嵌入到JSX语句中 ,括号内部为一个js变量或表达式
例如:{pic}:用括号把pic变量嵌入到JSX语句中

2.自定义组件
自定义组件也可以使用props,在render函数中引用this.props

class Class1 extends Component{
  render(){
    return(<Text>Hello {this.props.name}</Text>);
  }
}

class AwesomeProject extends Component {

  render (){
    return(
        <View style={{alignment:'center'}}>
          <Class1 name='a'/>
          <Class1 name='b'/>
          <Class1 name='c'/>
        </View>
    );
  }

}

分析:
咋Class1中将name作为一个属性,将Class1组件写在JSX语句中,用法和内置组件一样。

2017-02-08 21:30:33 sinat_17775997 阅读数 1807
  • 完全征服React Native

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

    57468 人正在学习 去看看 李宁

react-native-pullRefreshScrollView

https://github.com/lvming6816077/react-native-pullRefreshScrollView

React Native Pull To Refresh Component for ios platform support ScrollView,ListView

Demo

ScrollView:

ListView:

How to use

Download from npm
npm install --save react-native-pullrefresh-scrollview
Use in Scrollview
import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';

render() {

        return (
                <PullRefreshScrollView ref="PullRefresh" onRefresh={()=>this.onRefresh()}>
                    <View><Text>Scroll1</Text></View>
                </PullRefreshScrollView>
        );
  }
Use in Listview
import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';

render() {
   return (
      <ListView
        renderScrollComponent={(props) => <PullRefreshScrollView onRefresh={(PullRefresh)=>this.onRefresh(PullRefresh)} {...props}     />}

        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
       />
   );
}
image

Only text

Only image

LoadMore

End LoadMore

props
onRefresh:
refreshedText: ''
refreshingText: ''
refreshText:''
useLoadMore:false
endText:''
endingText:''
indicatorArrowImg: { //  default arrow.png
    style:{},
    url:''
}
indicatorImg: {  //  default 
    style:{},
    url:''
}
refreshType:'normal'  // normal  image  text
Regain the PullRefresh
onRefresh(PullRefresh){
        PullRefresh.onRefreshEnd();
}
End the LoadMore
onLoadMore(PullRefresh){
        PullRefresh.onLoadMoreEnd();
}

Advice

mail:441403517@qq.com

react-native-pullRefreshScrollView

React Native下拉刷新组件 ios 平台 支持ScrollView,ListView

效果展示

ScrollView:

ListView:

如何引入

从npm上下载组件
npm install --save react-native-pullrefresh-scrollview
在ScrollView中使用
import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';

render() {

        return (
                <PullRefreshScrollView ref="PullRefresh" onRefresh={()=>this.onRefresh()}>
                    <View><Text>Scroll1</Text></View>
                </PullRefreshScrollView>
        );
  }
在ListView中使用
import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';

render() {
   return (
      <ListView
        renderScrollComponent={(props) => <PullRefreshScrollView onRefresh={(PullRefresh)=>this.onRefresh(PullRefresh)} {...props}     />}

        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
       />
   );
}
定制图片

纯文字

纯图片

上拉加载

上拉加载完成

props
onRefresh:当触发刷新时的回调
refreshedText: '释放立即刷新'
refreshingText: '正在刷新数据中..'
refreshText:'下拉可以刷新'
useLoadMore:false //是否使用滚动加载功能 即上拉加载
endText:'已经加载完成'
endingText:'加载更多数据'
indicatorArrowImg: { // 下拉箭头图片和样式 default arrow.png
    style:{},
    url:''
}
indicatorImg: {  // loading图片和样式 default 
    style:{},
    url:''
}
refreshType:'normal'  // normal  image  text
收回下拉刷新
onRefresh(PullRefresh){
        PullRefresh.onRefreshEnd();
}
结束滚动加载
onLoadMore(PullRefresh){
        PullRefresh.onLoadMoreEnd();
}
2016-09-28 17:00:07 jiangbo_phd 阅读数 1945
  • 完全征服React Native

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

    57468 人正在学习 去看看 李宁

这里写图片描述

前言

项目开发过程中,调试非常重要,调试工具决定了我们的开发效率,最近在做一个项目采用React-Native框架,对这个框架的调试做了一点研究,为此分享一下个人的见解:

方法

在运行带RN的工程后,当前页面下ios模拟器通过cmd+D(真机可以通过摇一摇),android通过Menu按键,调出RN的开发者菜单,如图所示,

这里写图片描述

其中有选项“Debug JS Remotely”,可以将JS脚本在浏览器中进行调试。

此时浏览器会新建一个地址为http://localhost:8081/debugger-ui的窗口。

页面已经告诉我们React-Native的JS脚本正在这个tab中运行。

可以通过快捷键⌘⌥J(注释:command+option+J)打开开发工具。

按照提示打开debug模式,就可以看到这样的一个窗口。

这里写图片描述

这里需要注意源文件的位置,很多同学可能没有看到这个,如下截图:

这里写图片描述

剩下的就和web一样了,可以尝试设置一个断点调试了!

个人微信公众号

这里写图片描述

2017-08-31 17:02:52 s_521_h 阅读数 6613
  • 完全征服React Native

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

    57468 人正在学习 去看看 李宁

今天在Q群里有同学报出这个错误信息。

查了下stackoverflow,把这个问题的解决方法记录一下。

1、确认一下React.Component是否书写正确,不是React.component或者React.Comonent…
2、检查下React版本,确保更新到0.13.x及更高版本
3、检查模块间是否存在循环依赖
4、确认导入的库是否正确

确认以上4个方面都没有问题,一般能解决这个错误。

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