直播20:00正式开始,下午时间基本是扯淡闲聊:)
本demo源代码在github上
- 概念简介
- 入门 - Counter
- 入门 - TODO List
- 实战 - 登录注册(表单)
- 实战 - 首页(分页列表)
- 实战 - 购物车(联动)
- 高级 - 计时器
- 高级 - autosave
- 高级 - Swiper优化
直播20:00正式开始,下午时间基本是扯淡闲聊:)
本demo源代码在github上
在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}
.....
/>
`/**
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,不想更换成其他的,所以求大神帮帮忙)。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.