react.js 速学(一)

参考教程,不管是什么鬼,先撸一遍,
准备工作
node 先安装好换成国内源

npm install -g react-native-cli
react-native init myreact1

创建一个叫 myreact1 的项目

创建结果
react-native run-ios 正常的情况下 就会滚出来一大坨代码,滚完了之后,终端会跳出来(我这里用的是 iTerm 所以终端会跳出来) 终端

有个进度条还是滚,滚完了之后会自己启动模拟器

ios 模拟器

期间会报一个错,大意是不知道模拟器在哪,然后直接百度错误即可解决
顺便配置一下 http 图片在 ios9之后不显示的问题
网上有很多解决办法,我这里使用的是允许访问

image.png

准备工作结束,开始撸界面

---

代码直接粘到 index.ios.js 中

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
    Image,
} from 'react-native';
var MOCKED_MOVIES_DATA = [
  {title: '标题', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
export default class myreact1 extends Component {
  render() {
    var movie = MOCKED_MOVIES_DATA[0];
    return (
        <View style={styles.container}>
  <Text>{movie.title}</Text>
    <Text>{movie.year}</Text>
    <Image source={{uri: movie.posters.thumbnail}} />
  </View>
  );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});

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

显示效果如下

显示效果

发现是没有显示图片的,
需要注意的是图片的设置, 必须设置一个宽度高度,否者是不显示的

----样式部分---
thumbnail: {
    width: 53,
    height: 81,
  },
---修改 img 组件---
         <Image
          source={{uri: movie.posters.thumbnail}}
          style={styles.thumbnail}
        />

修改之后就有图片了

加载出了图片

下一步代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

var MOCKED_MOVIES_DATA = [
  {title: '标题', year: '2015', posters: {thumbnail: 'https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/668.jpg'}},
];
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';


export default class myreact extends Component {

  constructor(props) {
    super(props);   //这一句不能省略，照抄即可
    this.state = {
      movies: null,  //这里放你自己定义的state变量及初始值
    };
  }

  componentDidMount() {
    this.fetchData();
  }
  fetchData() {
    fetch(REQUEST_URL)
        .then((response) => response.json())
  .then((responseData) => {
      this.setState({
      movies: responseData.movies,
    });
  });
  }
  render() {
    if (!this.state.movies) {
      return this.renderLoadingView();
    }

    var movie = this.state.movies[0];
    return this.renderMovie(movie);
  }

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

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

var styles = StyleSheet.create({
  rightContainer: {
    flex: 1,
  },
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
  },
  year: {
    textAlign: 'center',
  },
  thumbnail: {
    width: 100,
    height: 160,
    borderColor:'red',
    borderWidth:1,
  },
});
AppRegistry.registerComponent('myreact1', () => myreact);

显示效果