對於不想折騰Android(or Kotlin)的Phper來說，要寫app，RN真的是個不錯的選擇。

　　開發環境就不多說了，用npm輕松搞定，容易被墻，自行解決。

　　先看下目錄結構吧：

　　index.android.js裏面import ‘./App‘，App.js裏面處理首頁展示跟邏輯：

import React, {Component} from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    StatusBar,
} from ‘react-native‘;
import { StackNavigator } from ‘react-navigation‘;

import Joke from ‘./components/Joke‘;

export default class HomeScreen extends Component {
    static navigationOptions = {
        title: ‘Welcome‘,
    };
    render() {
        return (
            <View style={styles.container}>
                <StatusBar backgroundColor="blue" barStyle="light-content"/>
                <Image source={require(‘./images/sh.jpeg‘)} style={styles.img}/>
                <Text style={styles.mid}>Purelightme && TT</Text>
                <TouchableOpacity onPress={()=>this.props.navigation.navigate(‘Joke‘,{ user: ‘亭亭‘})} title="Joke time"><Text style={styles.btn}>開啟奇幻之旅</Text></TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor: ‘white‘
    },
    img: {
        width: 240,
        height: 240,
        borderWidth: 2,
        borderColor: ‘#ee735c‘,
        borderRadius: 120,
        opacity: 0.9,
    },
    mid: {
        marginTop: 50,
        //transform: [{scale:2},{rotateX:‘120deg‘}]
    },
    btn: {
        height: 25,
        marginTop: 40,
        borderWidth: 2,
        borderStyle: ‘dotted‘,
        borderColor: ‘gray‘,
        borderRadius: 2,
        textAlign: ‘center‘,
        lineHeight: 25,
    }
});

const FirstApp = StackNavigator({
    Home: { screen: HomeScreen},
    Joke: { screen: Joke},
});
AppRegistry.registerComponent(‘FirstApp‘, () => FirstApp);
 

　　Joke組件在components下的Joke.js:

import React, {Component} from ‘react‘;
import {
    View,
    Text,
    StyleSheet,
    ListView,
} from ‘react-native‘;

import TWebView from ‘components/TWebView‘;

class Joke extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2,
            }),
            loaded: false,
        }
    }

    componentDidMount() {
        this._getJoke();
    }

    static navigationOptions = {
        title: ‘講個笑話‘,
    };

    _getJoke() {
        fetch(‘https://v.juhe.cn/joke/randJoke.php?key=e3f934b3cee28f02ea95eb17044e0cd0‘)
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseJson.result),
                    loaded: true,
                })
            })
            .catch((error) => {
                console.error("出錯啦！");
                console.error(error);
            });
    }

    _renderJoke(joke) {
        return (
            <View style={styles.container}>
                <Text style={styles.content}>{joke.content}</Text>
            </View>
        );
    }

    render() {
        if (!this.state.loaded) {
            return (
                <View style={styles.container}>
                    <Text>數據正在加載中</Text>
                </View>
            );
        }
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this._renderJoke}
            />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor: ‘white‘
    },
    content: {
        marginTop: 10,
    },
});
module.exports = Joke;
 

　　主要用到了RN的StackNavigator，ListView，Image和Text就不說啦，fetch發起網絡請求，數據來自聚合數據，後面打算結合百度AI的語音轉換實現自動播放笑話，sounds good! nice RN.

我的第一個RN應用（漂亮的首頁和笑話列表）