react native快速上手

RecoReco發表於2017-11-24
React Native

本文以mac環境為例，快速搭建react執行環境：

前置條件：

  1. node
  2. xcode

我使用的環境為:

$node -v
v6.11.2
$xcodebuild -version
Xcode 9.0
Build version 9A235複製程式碼

準備環境

如果這些都有了，那麼執行如下命令：

brew install yarn
yarn global add create-react-native-app
yarn add  watchman
create-react-native-app AwesomeProject
cd AwesomeProject
yarn run ios複製程式碼

官方文件中，使用了npm（而不是yarn），但是，我跑不起來。

然後可以看到模擬器執行起來。現在修改下工程目錄下的app.js,儲存後重新整理下模擬器，就可以看到效果。

今天發現還有更加簡單的方法，補充 2017年11月28日:

yarn global add react-native-cli
react-native init myproject
cd myproject複製程式碼

開啟目錄內的xcode工程，修改bundle name，保證可以編譯，然後按cmd+R執行。

因為有很多依賴工程，並且還有構建指令碼，所以需要漫長的等待。稅後，可以看到應用啟動完畢。可以修改app.js檔案，然後模擬器內直徑按cmd+R檢視修改效果。

釋出

首先把編寫好的js程式碼和資原始檔打包：

mkdir release_ios/
react-native bundle --entry-file App.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/複製程式碼

可以看到release_ios/目錄內有新建立的檔案。這些檔案會作為資源放入xcode project，和其他一般的iOS應用一樣，釋出此產品到模擬器，手機和App Store即可。工程就是使用react-native init 建立的工程。

快速參考

顯示圖片：

import React from 'react';
import {AppRegistry, Image } from 'react-native';
export default class App extends React.Component {
    render() {
      let pic = {
        uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
      };
      return (
        <Image source={pic} style={{width: 193, height: 110}}/>
      );
    }複製程式碼

}
自定義元件：

import React, { Component } from 'react';
import {Text, View } from 'react-native';
class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}
export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Cat3' />
      </View>
    );
  }
}複製程式碼

設定和使用狀態：

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};
    setInterval(() => {
      this.setState(previousState => {
        return { showText: !previousState.showText };
      });
    }, 1000);
  }
  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}
export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
      </View>
    );
  }
}複製程式碼

使用樣式表：

import React, { Component } from 'react';
import {StyleSheet, Text, View } from 'react-native';
export default class LotsOfStyles extends Component {
  render() {
    return (
      <View style={{width: 150, height: 50, backgroundColor: 'powderblue'}}>
        <Text style={styles.bigblue}>just bigblue</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  }
});
});複製程式碼

使用flex排版：

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};複製程式碼

網路請求：

import React, { Component } from 'react';
import { ActivityIndicator, ListView, Text, View } from 'react-native';
export default class Movies extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    }
  }
  componentDidMount() {
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.setState({
          isLoading: false,
          dataSource: ds.cloneWithRows(responseJson.movies),
        }, function() {
          // do something with new state
        });
      })
      .catch((error) => {
        console.error(error);
      });
  }
  render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={{flex: 1, paddingTop: 20}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData.title}, {rowData.releaseYear}</Text>}
        />
      </View>
    );
  }
}複製程式碼

文字輸入和按鈕聯動：

import React, { Component } from 'react';
import {Alert, Button, Text, TextInput, View } from 'react-native';
export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: 'something to say you'};
  }
  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          value="something"
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Button
          onPress={() => { Alert.alert(this.state.text)}}
          title="Press Me"
        />
      </View>
    );
  }
}複製程式碼

相關文章