Update README.md

Add serialization example
This commit is contained in:
Mikael Sand
2019-10-19 12:32:18 +03:00
committed by GitHub
parent b6ee11ad9e
commit cc1f835dc9

View File

@@ -48,6 +48,7 @@
- [Pattern](#pattern)
- [Marker](#marker)
- [Touch Events](#touch-events)
- [Serialize](#serialize)
- [Run example](#run-example)
- [TODO](#todo)
- [Known issues](#known-issues)
@@ -1220,6 +1221,67 @@ You can use these events to provide interactivity to your react-native-svg compo
For more examples of touch in action, checkout the [TouchEvents.js examples](https://github.com/magicismight/react-native-svg-example/blob/master/examples/TouchEvents.js).
### Serialize
```jsx
import * as React from "react";
import { Platform, StyleSheet, TouchableOpacity } from "react-native";
import { Svg, Rect } from "react-native-svg";
import ReactDOMServer from "react-dom/server";
const isWeb = Platform.OS === "web";
const childToWeb = child => {
const { type, props } = child;
const name = type && type.displayName;
const webName = name && name[0].toLowerCase() + name.slice(1);
const Tag = webName ? webName : type;
return <Tag {...props}>{toWeb(props.children)}</Tag>;
};
const toWeb = children => React.Children.map(children, childToWeb);
export default class App extends React.Component {
renderSvg() {
return (
<Svg height="100%" width="100%" style={{ backgroundColor: "#33AAFF" }}>
<Rect
x="50"
y="50"
width="50"
height="50"
fill="#3399ff"
strokeWidth="3"
stroke="rgb(0,0,0)"
/>
</Svg>
);
}
serialize = () => {
const element = this.renderSvg();
const webJsx = isWeb ? element : toWeb(element);
const svgString = ReactDOMServer.renderToStaticMarkup(webJsx);
console.log(svgString);
};
render() {
return (
<TouchableOpacity style={styles.container} onPress={this.serialize}>
{this.renderSvg()}
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
backgroundColor: "#ecf0f1",
padding: 8
}
});
```
### Run example:
```bash