50个dome reactnative

2016-12-12 11:22:02 sinat_17775997 阅读数 342

    学一个变成语言,一般我们都先完成一个hellowrold。这就不写了,然后根据Rn官网的顺序 我们需要了解 Props(属性)和State(状态)

        Props 属性用于定制一些必要的参数

        State 可以动态的改变一些状态 一般在构造方法中初始化 constructor中。

小例子:

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. /**  
  2.  * Sample React Native App  
  3.  * https://github.com/facebook/react-native  
  4.  * @flow  
  5.  */  
  6.   
  7. import React, { Component } from 'react';  
  8. import {  
  9.   AppRegistry,  
  10.   StyleSheet,  
  11.   Text,  
  12.   View,  
  13.   Image  
  14. } from 'react-native';  
  15.   
  16. class HaiSheng extends Component {  
  17.   render() {  
  18.      let pic = {  
  19.       uri : 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'  
  20.     };  
  21.     return (  
  22.       <View style={styles.container}>  
  23.         
  24.         <Text style={styles.welcome}>  
  25.           Welcome to React Native!  
  26.         </Text>  
  27.         <Text style={styles.namec}> 欢迎大海!我是大海 你们好哇!</Text>  
  28.        <Image source={pic} style={{width: 200, height: 200}} />  
  29.         <Greeting name="Rxjava"/>  
  30.         <Greeting name="RxAndroid"/>  
  31.         <Greeting name="Rxxdux"/>  
  32.   
  33.         <Blink text='I love to blink' />  
  34.         <Blink text='Yes blinking is so great' />  
  35.         <Blink text='Why did they ever take this out of HTML' />  
  36.         <Blink text='Look at me look at me look at me' />  
  37.         <View style={{width: 50,height: 50,backgroundColor:"green"}}/>  
  38.       </View>  
  39.     );  
  40.   }  
  41. }  
  42. class Greeting extends Component{  
  43.   render(){  
  44.     return(  
  45.       <View style={{alignItems:"center"}}>  
  46.       <Text> Hello {this.props.name} </Text>  
  47.       </View>  
  48.     );  
  49.   }  
  50. }  
  51.   
  52. class Blink extends Component{  
  53.   constructor(props){  
  54.     super(props);  
  55.     this.state = {showText: true};  
  56.   // 每1000毫秒对showText状态做一次取反操作  
  57.   setInterval(() => {  
  58.       this.setState({ showText: !this.state.showText });  
  59.     }, 1000);  
  60.     
  61.   }  
  62.   render(){  
  63. // 根据当前showText的值决定是否显示text内容  
  64. let display = this.state.showText ? this.props.text : ' ';  
  65. return (  
  66.       <Text>{display}</Text>  
  67.     );  
  68.   }  
  69. }  
  70.   
  71. const styles = StyleSheet.create({  
  72.   container: {  
  73.     flex: 1,  
  74.     justifyContent: 'center',  
  75.     alignItems: 'center',  
  76.     backgroundColor: '#F5FCFF',  
  77.       
  78.   },  
  79.   welcome: {  
  80.     fontSize: 20,  
  81.     textAlign: 'center',  
  82.     margin: 10,  
  83.   },  
  84.   namec:{  
  85.     fontSize:26,  
  86.     textAlign:"center",  
  87.     margin:10,  
  88.   }  
  89.    
  90. });  
  91.   
  92. AppRegistry.registerComponent('HaiSheng', () => HaiSheng);  

显示效果:

2017-08-23 23:09:10 AmazingUU 阅读数 3248

前一篇文章介绍了React Native实现Tab+ViewPager效果,这篇文章讲一下我在对上一篇文章的代码进行注释时遇到的问题。加注释出问题的代码如下:

//标题栏
        ① <View style = {styles.container}>
            ②<View style = {styles.headerView}><Text style = {styles.textHeaderStyle}>Header</Text>
            </View>
          //Tab栏
          <ScrollableTabView
              style={styles.pagerView}
              renderTabBar={() => <DefaultTabBar />}//默认样式,Tab栏不可滑动
              tabBarUnderlineStyle={styles.lineStyle}//下划线
              tabBarActiveTextColor='#FF0000'>         

          <MyFlatList  //列表项
            tabLabel = {dataSource1.tab}
            dataSource = {dataSource1}
            renderItem = {({item}) =>
            <TouchableNativeFeedback    //点击事件
                onPress = {this.onPress.bind(this,item)}>
                <Text style = {styles.textMainStyle}>{item.key}</Text>
            </TouchableNativeFeedback>
          }
          />
   。。。

原来没加注释是可以正常运行的,但是加了注释之后,会出现如下错误:

这里写图片描述

这我就很奇怪,为什么加了注释之后会报错。仔细排查发现:

>后使用 // 作为注释要注意,注释内容必须不在任何html标签里,否则会当成要显示的文本内容

例如上面的//Tab栏虽然在②的外,但是仍在①的内,会被当做要显示的文本,从而报错。这时候注释要用{/* 一般注释, 用 {} 包围 */}

react native里是用JSX语言,JS和html结合,所有注释方式如下:

var content = (
  <Nav>
    {/* 一般注释, 用 {} 包围 */}
    <Person
      /* 多
         行
         注释 */
      name={window.isLoggedIn ? window.name : ''} // 行尾注释
    />
  </Nav>
);

总结一下,>后注释一般用 {/* */},如果不在任何标签内,可以用 //, } 后注释用 //

2018-07-16 11:34:58 colinandroid 阅读数 680

这里写图片描述


React Native入门系列文章
第一篇:《小白扫盲篇
第二篇:《如何编写样式
第三篇:《如何手动开始写一个组件
第四篇:《组件间通信
第五篇:《踩过的坑
第六篇:《实战写一个电影列表页
第七篇:《网络通信和缓存处理
第八篇:《Android打包发布

redux是一个状态管理器,应用中所有的状态(state),都以一个对象树的形式存在于一个单一的store中。唯一改变state的办法是触发一个action。

一开始接触redux时对于它和react的关系理解很混乱:

  • 一会儿是state,一会儿又是store,这两者到底有什么关系?
  • 看代码时,dispatch、reducer、action这三者之间需要跳来跳去,它们到底是什么关系?为什么要这样设计结构?
  • connect、mapStateToProps、mapDispatchToProps这三者有什么关系?或者说这三个是干什么的?跟redux有什么关系?
  • action不就是一个function吗?它和普通的function有区别吗?为什么它就叫action?它return的值return给谁了?
  • redux让我和react之间隔了一层神秘的面纱,学习成本实在太高了,很多点只是大致知道了,可是就是无法从一个宏观的角度去理解,结果就是好混乱啊…cry to die…

我们先讲一下redux是干嘛的,它是解决什么需求的。
先来看看react里面数据是怎样传递的。

一. React数据流

react数据传递

  1. 可以看到,一般都是Container在设置好state后(this.state设置好)
  2. 把命令一层层地传递下去(this.props渲染)
  3. 要是哪个component想要更新页面内容了
  4. 就得一层层往上报告(通过回调),不能越级
  5. 最好上报到container后,由container去setState修改数据并重新渲染

这个过程是不能越级的,数据传递总是让人觉得不是很灵活。

所以,如果层次不深,组件之间没有什么共用数据的话,用react自身的setState其实也可以了。可是,当嵌套一深,或者组件间有一些共用数据时就比较麻烦了,于是就有了redux。

二. 分清两个state

redux中的state和react中的state完全不是一回事。react中的state是组件内部自己的状态信息,而redux中的state是redux自己的数据,然后react拿redux的数据来用,其实redux也可以在其他框架下使用,并不是非要跟react一起使用。
简单画个图就像下面这样
这里写图片描述
这只是一个简单的示意图,实际使用并非如此,这个图示是为了让大家理解react中的数据和readux中的数据是独立的,并没有半毛钱关系。

三. Redux中三个重要角色

网上对于redux教程非常多,这里简要介绍一下

1. store

store:创建一个store

import { createStore } from 'redux';
const store = createStore(reducer);

用来让外界获取redux数据

store.getState

让外界修改redux中数据

store.dispatch

2. action

action:描述我要干啥,一般是一个对象的形式,其中有一个type字段是必须要有的。只有被dispatch的action才有意义,否则它跟一个普通的function没什么区别。

3. reducer

reducer:真正去修改redux的state。

const defaultState = {};
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case Type.REQUEST:
      return {
	      ...state,
	      action.request
      };
    default: 
      return state;
  }
};

我们在平时使用redux时,都是dispatch一个action,而真正去修改state,然后返回一个全新的state的是reducer。
那么怎么去触发一个action呢?
就是前面提到的store.dispatch,把action作为dispatch的参数。

store.dispatch({ type:Type.Request,test:"100" })

这样就可以触发action,执行reducer,返回一个全新的state了。

四. Redux和React

到此为止,redux自己就折腾完了,而redux自己的数据并没有用,它要把数据交给react用才行,接下来讲一讲怎么把数据交给react来用。
上面我们创建了一个对象store,我们要把这个store对象作为props传给react,那react就可以用了。
这个store只能有一个,也就只能创建一次,也就是说你在最顶层处创建一个store对象,然后再一层一层地传下去,才能让所有组件都能获取这个store对象,调用它的方法。

1. 获取redux中的数据

比如说我要在render函数中显示redux数据,那么我就可以先获取它的数据:

store.getState()

然后把这个数据当做props渲染到组件中就行了。

2. 更新redux中的数据

如果要修改它的数据,那就在JSX中调用

store.dispatch({type:Type.Request,test:"100})

3. 响应redux中的变化

那么这里问题又来了,你调用了store.dispatch之后redux中数据确实变了,可是react并没有什么改变啊。也就是说react中的render函数并没有被触发,就好像react中你直接修改react中的state是没用的,而必须调用react中的setState才能重新渲染。
因此,为了让redux的数据一改变我们就重新渲染,redux提供了一个监听方法

store.subscribe(render)

这个函数就可以监听redux中state的变化,一旦redux中的state发生了变化,render函数就会被调用,页面就会被重新渲染

上面这个过程就是手动调用的过程,但这样调用有点麻烦,因为要让所有的组件都能应用store中的数据,那么所有组件都要把store当做props传进来,这样太麻烦了。

五. React-Redux

这个时候就需要去安装一些中间件了,还记得你在你的react-native项目中接入redux时安装的三个库吗?
这里写图片描述

npm install --save redux
npm install --save react-redux
npm install --save redux-thunk
npm install --save react-navigation

其中,react-redux就是为了简化redux的调用流程(后面我们会一一介绍这几个库都做了什么,为什么要引入这几个库)。

在react-redux中有两个比较关键的概念:Provider和connect方法

1. Provider

一般我们都将顶层组件包裹在Provider组件之中,这样的话,所有组件就都可以在react-redux的控制之下了,但是store必须作为参数放到Provider组件中去

<Provider store = {store}>
    <Container/>
<Provider>

这个组件的目的是让所有组件都能够访问到redux中的数据
这个比较简单,我们来讲connect方法。

2. connect方法

connect(mapStateToProps,mapDispatchToProps)(MyComponent)

这两个参数非常重要,我们来讲下。

3. mapStateToProps

字面含义就是把state映射到props中去,意思就是把redux中的数据映射到react中的props中去
比如一个component想要把网络请求的数据拿来渲染,就可以在这个component中把redux中的response拿过来用

const mapStateToProps = (state) => {
  return {
    data: state.response
  }
}

然后渲染的时候就可以直接使用this.props.data

class Container extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return(
            <div>this.props.data</div>
        )
    }
}
const mapStateToProps = (state) => {
  return {
    data: state.response
  }
}
export default connect(mapStateToProps)(Container)

这样就可以实现渲染,把redux中的state变成react中的props

4. mapDispatchToProps

通过上面的分析,相信这个函数也很好理解,就是把各种dispatch变成props直接使用

const mapDispatchToProps = (dispatch) => {
  return {
    onClick: () => {
      dispatch({
        type: Type.REQUEST,
     test : "100"
      });
    }
  };
}

更改一下Container组件

class Container extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return(
            <div>this.props.data</div>
            <button onClick = {this.props.onClick}>点击</button>
        )
    }
}
const mapStateToProps = (state) => {
  return {
    data: state.data
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    onClick: () => {
      dispatch({
        type: Type.REQUEST,
     data : "100"
      });
    }
  };
}
export default connect(mapStateToProps,mapDispatchToProps)(Container);

这样,当点击按钮后,Container组件就会自动更新,而不需要我们手动去store.subscribe订阅render函数以达到更新页面的目的,这样一来我们就不需要一层层传递store对象了

六. tips

这样随处都可以使用、修改redux中的数据的方式很方便,但redux推荐的最佳实践还是在尽可能少的地方使用connect,把逻辑数据相关的都放到容器组件中去处理,把其他的组件都由容器组件所生成的props一层层传递下去然后渲染。
###redux-thunk
redux-thunk是一个比较流行的redux异步action中间件,比如action中有setTimeOutfetch,那么就应该用redux-thunk。这里就不详细介绍了。

七. 最后

本文适合一些已经对redux有过一定研究,但思路还是比较混乱的小伙伴,这篇文章一定能帮你理清思路。另外欢迎下载集成了redux的react-native的demo

2017-08-18 00:49:00 weixin_33691700 阅读数 84
  • 该项目在http://www.lcode.org/study-react-native-opensource-two/上发现

更有意思的发现这个网站https://juejin.im/是采用vue.js开发的。

上边这个开源的react native代码是一个基于React Native和MobX实现的美食类App。

同时支持ios&android,代码下载地址:https://github.com/ljunb/react-native-iShiWuPai

  • 很兴奋,就调测安装一把

结果:

运行起来的话,需要相关第三方库

  1. mobx
  2. mobx-react
  3. react-native-camera
  4. react-native-easy-toast
  5. react-native-scrollable-tab-view
  • 建议不要自己手动去安装以上组件,请使用npm安装:
1 $ git clone https://github.com/ljunb/react-native-iShiWuPai.git
2 $ cd react-native-iShiWuPai 
3 $ npm install
4 $ react-native run-ios/run-android

【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)

https://www.cnblogs.com/ljq66/p/10012878.html