mirror of
https://github.com/zhigang1992/examples.git
synced 2026-01-12 17:13:21 +08:00
Update victory native example to use hooks
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import { VictoryBar, VictoryChart, VictoryTheme } from 'victory-native';
|
||||
import { AppLoading } from 'expo';
|
||||
import * as Font from 'expo-font';
|
||||
import { useFonts } from "@use-expo/font";
|
||||
import { AppLoading } from "expo";
|
||||
import * as React from "react";
|
||||
import { StyleSheet, View } from "react-native";
|
||||
import { VictoryBar, VictoryChart } from "victory-native";
|
||||
|
||||
const data = [
|
||||
{ quarter: 1, earnings: 13000 },
|
||||
@@ -11,46 +11,36 @@ const data = [
|
||||
{ quarter: 4, earnings: 19000 },
|
||||
];
|
||||
|
||||
export default class App extends React.Component {
|
||||
state = { isReady: false };
|
||||
export default function App() {
|
||||
const [isLoaded] = useFonts({
|
||||
Roboto: require("./Roboto.ttf"),
|
||||
});
|
||||
|
||||
_loadFontAsync = () => {
|
||||
return Font.loadAsync({ Roboto: require('./Roboto.ttf') });
|
||||
};
|
||||
|
||||
render() {
|
||||
if (!this.state.isReady) {
|
||||
return (
|
||||
<AppLoading
|
||||
startAsync={this._loadFontAsync}
|
||||
onFinish={() => this.setState({ isReady: true })}
|
||||
onError={e => console.log(e)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<VictoryChart
|
||||
width={350}
|
||||
/**
|
||||
* the material theme uses the Roboto font, and react-native-svg isn't
|
||||
* compatible with expo-font, so we can't use this theme:
|
||||
* theme={VictoryTheme.material}
|
||||
**/
|
||||
>
|
||||
<VictoryBar data={data} x="quarter" y="earnings" />
|
||||
</VictoryChart>
|
||||
</View>
|
||||
);
|
||||
if (!isLoaded) {
|
||||
return <AppLoading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<VictoryChart
|
||||
width={350}
|
||||
/**
|
||||
* the material theme uses the Roboto font, and react-native-svg isn't
|
||||
* compatible with expo-font, so we can't use this theme:
|
||||
* theme={VictoryTheme.material}
|
||||
**/
|
||||
>
|
||||
<VictoryBar data={data} x="quarter" y="earnings" />
|
||||
</VictoryChart>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#f5fcff',
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f5fcff",
|
||||
},
|
||||
});
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
## Running the app
|
||||
|
||||
- Run `yarn` or `npm install`
|
||||
- Run [`expo start`](https://docs.expo.io/versions/latest/workflow/expo-cli/), try it out.
|
||||
- Run [`expo start`](https://docs.expo.io/versions/latest/workflow/expo-cli/), to try it out!
|
||||
|
||||
## The idea behind the example
|
||||
|
||||
Expo includes react-native-svg, which is the only native dependency for victory-native. This demo shows that it's as simple as adding a supported version of victory-native and then using it as suggested in the docs. The code in main.js is copied directly out of the victory-native example app.
|
||||
Expo includes `react-native-svg`, which is the only native dependency for `victory-native`. This demo shows that it's as simple as adding a supported version of `victory-native` and then using it as suggested in the docs. The code in `App.js` is copied directly out of the `victory-native` example app.
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
export default {
|
||||
icon:
|
||||
"https://github.com/expo/expo/blob/master/templates/expo-template-blank/assets/icon.png?raw=true",
|
||||
loading: {
|
||||
icon:
|
||||
splash: {
|
||||
image:
|
||||
"https://github.com/expo/expo/blob/master/templates/expo-template-blank/assets/splash.png?raw=true",
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"@use-expo/font": "^2.0.0",
|
||||
"expo": "^37.0.7",
|
||||
"expo-font": "~8.0.0",
|
||||
"lodash": "^4.17.10",
|
||||
"react": "16.9.0",
|
||||
"react-dom": "16.9.0",
|
||||
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
|
||||
"react-native-web": "0.11.7",
|
||||
"react-native-svg": "9.13.3",
|
||||
"react-native-web": "0.11.7",
|
||||
"victory-native": "^34.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Reference in New Issue
Block a user