react native 一些套件

react native UI框架、storage儲存、navigation導覽、spinner轉圈

專案用到

nativebaseUI

https://docs.nativebase.io/docs/GetStarted.html

npm install native-base --save
react-native link

react-native-storage本機儲存

https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md

npm install react-native-storage --save
react-native link

react-navigation導覽頁(跳頁堆疊)

https://reactnavigation.org/docs/intro/quick-start

yarn add react-navigation
react-native link

react-native-loading-spinner-overlay 轉圈

npm install --save react-native-loading-spinner-overlay
react-native link

使用方式

import Spinner from 'react-native-loading-spinner-overlay';


class MyApp extends Component {
    constructor(props) {
        super(props);
        this.state = { visible: true };
    }

    showSpinner() {
        console.log('Show Spinner');
        this.setState({ visible: true });
    }

    hideSpinner() {
        console.log('Hide Spinner');
        this.setState({ visible: false });
    }

    render() {
        return (
            <View>
                <Spinner
                    visible={this.state.visible}
                    textContent={'Loading...'}
                    textStyle={{ color: '#FFF' }}
                />
                <WebView
                    source={{ uri: 'https://www.google.com.tw/' }}
                    onLoadStart={() => (this.showSpinner())}
                    onLoad={() => (this.hideSpinner())}
                />
            </View>
        );
    }
}