mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-13 19:35:41 +00:00
55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
import { StyleSheet, Text, View } from 'react-native';
|
|
|
|
export default function Example(props) {
|
|
return (
|
|
<View style={styles.root}>
|
|
<View style={styles.header}>
|
|
<Text accessibilityLabel="Back" href="/" style={styles.back}>
|
|
<svg
|
|
style={{ fill: '#555', height: '100%' }}
|
|
viewBox="0 0 140 140"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M105.614 118.681c3.398 3.396 3.4 8.912 0 12.311-3.396 3.399-8.91 3.398-12.311 0-.02-.02-.035-.04-.053-.061l-.025.022-57.66-57.66.024-.022a8.664 8.664 0 01-2.608-6.208 8.672 8.672 0 013.229-6.762l-.06-.058 57.66-57.66.025.024c.018-.021.033-.039.053-.058A8.706 8.706 0 01106.2 14.86c-.021.02-.041.034-.061.054l.023.024-52.119 52.125 51.54 51.54-.025.021c.015.022.036.036.056.057" />
|
|
</svg>
|
|
</Text>
|
|
<Text accessibilityRole="heading" style={styles.title}>
|
|
{props.title}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.container}>{props.children}</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
root: {
|
|
height: '100vh'
|
|
},
|
|
header: {
|
|
paddingVertical: '1em',
|
|
borderBottomColor: '#ccc',
|
|
borderBottomWidth: 1
|
|
},
|
|
title: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center'
|
|
},
|
|
back: {
|
|
position: 'absolute',
|
|
height: '100%',
|
|
display: 'flex',
|
|
padding: 10,
|
|
left: 0,
|
|
top: 0,
|
|
width: 40,
|
|
alignItems: 'center'
|
|
},
|
|
container: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
overflowY: 'scroll'
|
|
}
|
|
});
|