tdzl2003 / mobx-lesson-20170122

Mobx 20170122 天地之灵-Mobx案例精讲

直播20:00正式开始,下午时间基本是扯淡闲聊:)

本demo源代码在github上

1. 概念简介
2. 入门 - Counter
3. 入门 - TODO List
4. 实战 - 登录注册（表单）
5. 实战 - 首页（分页列表）
6. 实战 - 购物车（联动）
7. 高级 - 计时器
8. 高级 - autosave
9. 高级 - Swiper优化

mobx-lesson-20170122's Issues

iOS 跑不起来 `WebView` has no propType for native prop `RCTWebView.messagingEnabled` of native type `BOOL`

在项目中使用了您的PageList，但是发现results数据绘制了3遍

`/**

• Created by cloudesafe on 2017/4/13.
  */
  import React, { Component } from 'react';
  import {
  StyleSheet,
  Text,
  View,
  ListView,
  RefreshControl
  } from 'react-native';
  import { observer } from 'mobx-react/native';
  import { observable, computed,action} from 'mobx';
  import Icon from 'react-native-vector-icons/FontAwesome';
  import HeaderRight from './HeaderRight';
  import Style from '../../public/Style';
  import Listjob from './listjob.json';
  import PageList from '../../public/widget/PageList';
  import JobItem from './JobItem';
  import Api from '../../public/api';
  const styles = Style.styles;
  class SamplePage extends PageList {
  // BackAndroid is deprecated.Please use BackHandler instead.
  fetchData(skip = 0) {

   return tests = fetch(Api.joblist+'/skip/'+skip)
       .then((response) => response.json())
       .then((responseData) => {
           return responseData;
       }).catch((e)=>{return Listjob});
  

  }
  }
  @observer
  export default class JobList extends Component {
  static navigationOptions = ({navigation}) => {
  return {
  headerTitle : <Text style={{color:'#fff',fontSize:18,alignSelf:'center'}}>{navigation.state.params.titlename},
  headerRight : ,
  headerStyle:styles.jobHeaderStyle,
  headerTintColor:'#fff',
  headerBackTitle:null
  };
  };
  pageList;
  ds = new ListView.DataSource({ rowHasChanged: (v1, v2) => v1 !== v2 });
  constructor(props){
  super(props);
  this.pageList = new SamplePage();
  }

  renderRow = (row) => (
  <JobItem rowData={row}
  navigation={this.props.navigation}
  onPress={()=>{this.props.navigation.navigate('JobDetail',{id:row.id})}}
  />

  );

  render() {

   return (
  
       <View style={styles.jobContainer}>
           <ListView
               enableEmptySections
               dataSource={this.ds.cloneWithRows(this.pageList.data.slice(0))}
               renderRow={this.renderRow}
               refreshControl={
                   <RefreshControl
                       refreshing={this.pageList.isRefreshing}
                       onRefresh={this.pageList.refresh}
                       tintColor="#ff0000"
                       title="Loading..."
                       titleColor="#00ff00"
                       colors={['#ff0000', '#00ff00', '#0000ff']}
                       progressBackgroundColor="#ffff00"
                   />
               }
               onEndReached={this.pageList.fetchMore}
           />
  
       </View>
   );
  

  }
  } 上面是项目代码， 下面是您demo中的代码class SamplePage extends PageList {
  fetchData() {
  return {
  count: 1000,
  results: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  };
  }
  }`
  我发现，只要这里设置的results数据不是10个就会出现绘制results内容3次。
  目前项目接口对应的技术在开发着，这里的处于留坑状态（我在list对应的item同样适用的mobx，不想更换成其他的，所以求大神帮帮忙）。

excuse me...error occured

在箭头函数上加@action时报错Cannot read property 'length' of undefined

在mobx中若在@action是箭头函数就报错，但我看mobx说是action支持剪头函数的。报错如下：Cannot read property 'length' of undefined
出错代码为项目文件夹下node_modules/react-proxy/modules/deleteUnknownAutoBindMethods.js
第38行prototypeDescriptor.get()为undefined，所以.length就出错了，如下：

function shouldDeleteModernInstanceMethod(component, name) {
  var prototype = component.constructor.prototype;

  var prototypeDescriptor = Object.getOwnPropertyDescriptor(prototype, name);

  if (!prototypeDescriptor || !prototypeDescriptor.get) {
    // This is definitely not an autobinding getter
    return false;
  }

  if (prototypeDescriptor.get().length !== component[name].length) {
    // The length doesn't match, bail out
    return false;
  }

  // This seems like a method bound using an autobinding getter on the prototype
  // Hopefully we won't run into too many false positives.
  return true;
}

但当我把rn程序reload后，错误消失了

使用部分代码如下

@observable
  borderColor = '#eee';

  @action
  _onFocus=()=> {
    this.borderColor = '#ffba00';
  };

  <TextInput
    ref='input'
    style={styles.input}
    onFocus={this._onFocus}
    .....
  />