react.js 速学(一)
2017-09-11 本文已影响23人
路路有话说
参考教程,不管是什么鬼,先撸一遍,
准备工作
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);
显示效果