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