React Native 二:快速入門

來源:互聯網
上載者:User

標籤:

前面我們使用react-native init建立了一個項目,這是一個簡單的Hello World App(項目結構如)。對於iOS來說,你需要編輯index.ios.js來改變App;對於Android,你需要編輯index.android.js來修改App。然後搖晃菜單中點擊Road JS查看改變。下面我們就以Android為例子來嘗試修改了App。
一、修改index.android.js檔案index.android.js檔案:
//Mock資料var MOCKED_MOVIES_DATA = [  {title: ‘Title‘, year: ‘2015‘, posters: {thumbnail: ‘http://i.imgur.com/UePbdph.jpg‘}},];//匯入React-Native相關組件import React, {  AppRegistry,  Component,  Image,  StyleSheet,  Text,  View,} from ‘react-native‘;//建立AwesomeProject組件類class AwesomeProject extends Component {  //使用Mock資料,通過Html渲染組件   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}} style={styles.thumbnail}/>      </View>    );  }}//渲染組件的樣式var styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: ‘center‘,    alignItems: ‘center‘,    backgroundColor: ‘#F5FCFF‘,  },  thumbnail: {    width: 53,    height: 81,  },});//註冊建立的AwesomeProject組件類AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);
二、重新載入js修改完index.android.js檔案後,搖晃你的手機,會彈出如下菜單。選擇Reload JS:
三、添加一些樣式現在們修改下標題,年份和圖片的展示,通過添加一些樣式展示呈左右布局形式,修改index.android.js檔案如下:1.index.android.js檔案:
var MOCKED_MOVIES_DATA = [  {title: ‘Title‘, year: ‘2015‘, posters: {thumbnail: ‘http://i.imgur.com/UePbdph.jpg‘}},];import React, {   ... ... } from ‘react-native‘;class AwesomeProject extends Component {  render() {    var movie = MOCKED_MOVIES_DATA[0];    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>    );  }}var styles = StyleSheet.create({  container: {    flex: 1,    //橫向排列    flexDirection: ‘row‘,    justifyContent: ‘center‘,    alignItems: ‘center‘,    backgroundColor: ‘#F5FCFF‘,  },  //渲染剩餘空間  rightContainer: {      flex: 1,  },  thumbnail: {    width: 53,    height: 81,  },  //添加title和year展示樣式  title: {    fontSize: 20,    marginBottom: 8,    textAlign: ‘center‘,  },  year: {    textAlign: ‘center‘,  },});AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);
2.重新載入JS,展示如下:
四、擷取真實資料下面我們從Rotem Tomatoes.s的API擷取資料,用於React-Native展示:1.修改index.android.js檔案
//擷取遠程真實資料的URLvar REQUEST_URL = ‘https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json‘;import React, {   ... ... } from ‘react-native‘;class AwesomeProject extends Component {  //建構函式,初始化movies為null  constructor(props) {    super(props);    this.state = {      movies: null,    };  }  //組件在載入到虛擬DOM的時候,請求API資料  componentDidMount() {    this.fetchData();  }  //請求API資料  fetchData() {    fetch(REQUEST_URL).then((response) => response.json()).then((responseData) => {      this.setState({        movies: responseData.movies,      });    }).done();  }  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>          Loading movies...        </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>    );  }}var styles = StyleSheet.create({  ... ... });AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);
2.重新載入JS,顯示如下:
五、列表展示我們嘗試把API中請求返回的所有資料,用ListView展示出來;1.修改index.android.js檔案;
var REQUEST_URL = ‘https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json‘;import React, {  ... ...  //引入清單控制項   ListView,  ... ... } from ‘react-native‘;class AwesomeProject extends Component {  constructor(props) {    super(props);    //初始化列表資料來源dataSource    this.state = {      dataSource: new ListView.DataSource({        rowHasChanged: (row1, row2) => row1 !== row2,      }),      loaded: false,    };  }  componentDidMount() {    this.fetchData();  }  fetchData() {    fetch(REQUEST_URL).then((response) => response.json()).then((responseData) => {      this.setState({        //請求API返回的電影資料作為列表的資料來源        dataSource: this.state.dataSource.cloneWithRows(responseData.movies),        loaded: true,      });    }).done();  }  render() {    if (!this.state.loaded) {      return this.renderLoadingView();    }    return (      <ListView        dataSource={this.state.dataSource}        renderRow={this.renderMovie}        style={styles.listView}/>    );  }  renderLoadingView() {    ... ...   }  renderMovie(movie) {    return (      ... ...     );  }}var styles = StyleSheet.create({  ... ...   //列表展示樣式  listView: {    paddingTop: 20,    backgroundColor: ‘#F5FCFF‘,  },});AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);
2.重新載入JS,顯示如下:

React Native 二:快速入門

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.