RN初识

image.png

资料

RN安装
https://www.jianshu.com/p/95137688897a

RN中文
https://reactnative.cn/docs/0.50/getting-started.html#content

需要学习ES6
http://es6.ruanyifeng.com/#docs/let

flex布局，rn样式指南
https://github.com/doyoe/react-native-stylesheet-guide

提示

• 运行，不要用命令运行，还是用xcode运行，不然很慢
• 下载visual studio code导入工程代码
• 修改完成代码点击保存然后点击模拟器，com+r页面就会更新，com+d弹出菜单

体验代码

一个list的简单代码

import React, {
  Component,
} from 'react';
import {
  AppRegistry,
  Image,
  StyleSheet,
  FlatList,
  Text,
  View,
} from 'react-native';

{/* <FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/> */}

//数据源
var MOCKED_MOVIES_DATA = [
  {title: '标题1', year: '2015', posters: {thumbnail: 'http://cdn.duitang.com/uploads/blog/201312/17/20131217022651_XnBj3.thumb.224_0.jpeg'}},
];

//加载
export default class HelloWorldApp extends Component {
  
  //渲染视图
  render() {
    return this.renderList();
  }

  //列表
  renderList(){
    var data = [];
    for (var i = 0; i < 10; i++) {
      var image = 'https://cdn.duitang.com/uploads/blog/201312/17/20131217022651_XnBj3.thumb.224_0.jpeg';
      data.push({title: '标题'+i, year: '200'+i+'', posters: {thumbnail: image}});

      }

    return(
      <FlatList
      //数据源
      data={data}
      //item
      renderItem={this.renderMovie}
      //风格
      style={styles.list}
      />
    );
  }
  //渲染
  renderMovie(movie){
    //数据源
    // 取item然后再取属性
    return (
      <View style={styles.container}>
      <Image
        source={{uri: movie.item.posters.thumbnail}}
        style={styles.thumbnail}
      />
     <View style = {styles.rightContainer}>
         <Text style = {styles.title}>{movie.item.title}</Text>
         <Text style = {styles.year}>{movie.item.year}</Text>
     </View>
    </View>
    );
  }
}

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

AFB49723-76AE-4105-AD93-61C7AC7DDF8D.png