React Native 0.20官方入門教程

最近對React Native比較有興趣，簡單把官網的入門例子做了一下，發現了很多坑，特別是watchman版本過低的問題，導致總是運行不起來。所以 這里特別下載了最新的watchman，進行了源碼編譯。希望本文對剛學習的新人有用。

安裝Rect Native

安裝必要的依賴watchman

cd watchman-4.5.0
./autogen.sh
./configure --prefix=/usr/local/Cellar/watchman/2.9.8 --with-pcre
make
make install

安裝Rect Native開發工具

npm install -g react-native-cli
react-native init <APP_NAME>

IOS版本的項目文件用XCODE打開<APP_NAME>/ios/<APP_NAME>.xcodeproj，運行?+R即可

此時通過修改index.ios.js 運行?+R查看視圖變化

模擬數據

通常在index.ios.js或index.android.js 頂部增加

var MOCKED_MOVIES_DATA = [
  {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];

修改代碼,增加Image組件支持

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

修改render

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>
    );
  }

更新樣式代碼

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
      width: 53,
      height: 81,
  }
});

Xcode中?+R重新載入，即看到視圖已載入我們的模擬數據。

重新布局

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>
    );
  }

更新樣式

const 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,
  }
});

獲取真實的數據

添加API數據地址

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

完整代碼

'use strict';

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

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

class FaceMash extends Component {
  constructor(props){
    super(props);
    this.state = {
      movies: null,
    };
  }

  componentDidMount(){
    this.fetchData();
  }

  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>
      );
  }
}

const 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,
  }
});

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

顯示列表

/**
 * Sample React Native App
 * https://github.com/非死book/react-native
 */
'use strict';

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

var API_KEY='7waqfqbprs7pajbz28mqf6vz';
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
var PAGE_SIZE = 25;
var PARAMS = '?apikey='+API_KEY+'&page_limit='+PAGE_SIZE;
var REQUEST_URL = API_URL+PARAMS;

class FaceMash extends Component {
  constructor(props){
    super(props);
    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({
              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}>
        </ListView>

      );
  }

  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>
      );
  }
}

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

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