React-Native改变FB官网实例
博客专区 > zcl111 的博客 > 博客详情
React-Native改变FB官网实例
zcl111 发表于2年前
React-Native改变FB官网实例
  • 发表于 2年前
  • 阅读 55
  • 收藏 2
  • 点赞 2
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: ES6 语法 网站的例子是用es5语法,这个例子是根据native初始化命令生成的项目,然后修改出来的

/**

  • 官网例子
  • 改变成es6写法 */ 'use strict'; import React, { AppRegistry, Component, Image, StyleSheet, Text, View, ListView } from 'react-native';

var MOCKED_MOVIES_DATA = [ {title: '我们奔跑吧', year: '2016', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}} ];

var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

class nativeProject extends Component {

constructor(props){
    super(props);
    this.state = {
        movies: null,
        dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        }),
        loaded: false,
    };
}

componentDidMount() {
    this.fetchData();
    console.log(this.fetchData());
}

fetchData() {
    fetch(REQUEST_URL)
        .then((response) => response.json())
        .then((responseData) => {
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
                loaded: true,
            });
        })
        .done();
}

renderLoadingView() {
    return (
        <View style={styles.container}>
            <Text>
                正在加载电影数据……
            </Text>
        </View>
    );
}

renderMovie(movie) {
    return (

        <View style={styles.container}>
            <Image
                source={{uri: movie.posters.thumbnail}}
                style={styles.thumbnail}
            />
            <View style={styles.rightContainer}>
                <Text style={styles.title}>{movie.title}</Text>
                <Text style={styles.year}>{movie.year}</Text>
            </View>
        </View>
    );
}

render() {
    if(!this.state.loaded) {
        return this.renderLoadingView();
    }
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderMovie}
            style={styles.listView}
        />
    );
}

}

const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, rightContainer: { flex: 1, //backgroundColor:'red', }, thumbnail: { width: 53, height: 81, }, title: { fontSize: 20, marginBottom: 8, textAlign: 'center', }, year: { textAlign: 'center', }, });

AppRegistry.registerComponent('nativeProject', () => nativeProject);

共有 人打赏支持
粉丝 4
博文 88
码字总数 10591
×
zcl111
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: