mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-06-03 18:52:07 +00:00
Reorganize monorepo structure
* Move all config files to './configs' * Simplify './scripts' folder.
This commit is contained in:
Nicolas Gallagher
@@ -0,0 +1,563 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @noflow
|
||||
*/
|
||||
|
||||
/* eslint-disable no-use-before-define */
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Button,
|
||||
Image,
|
||||
PixelRatio,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
Switch,
|
||||
View
|
||||
} from 'react-native';
|
||||
import Example from '../../shared/example';
|
||||
|
||||
const SCALE = PixelRatio.get();
|
||||
const IMAGE_DIMENSION = 100 * SCALE;
|
||||
const IMAGE_SIZE = [IMAGE_DIMENSION, IMAGE_DIMENSION];
|
||||
const iconSource =
|
||||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgZmlsbD0iIzAwMDAwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik0yNS44NjcsNDguODUzQzMyLjgwNiw1MC4xNzYsNDYuNDYsNTIuNSw2MS4yMTUsNTIuNWgwLjAwNWM5LjcxLDAsMTguNDAxLTEuMDU3LDI1LjkzOC0yLjkxMyAgIGMwLjE1OS0wLjA0NiwwLjM1LTAuMTM1LDAuNTY1LTAuMTg3YzAuMjgyLTAuMDcyLDAuNTY1LTAuMTY0LDAuODQ0LTAuMjM4YzMuMTg0LTAuOTY0LDIuNTc3LTMuMDUxLDIuMTk5LTMuODUyICAgYy00LjE2Ni03LjcxOS0xNS4wODYtMjMuNDE1LTM1LjAyOC0yMy40MTVjLTIyLjE2OSwwLTMwLjI2MiwxMC42MzUtMzMuMTQsMTkuNTg5QzIyLjU0NSw0Mi4zMzMsMjIuNDA3LDQ3LjEzNSwyNS44NjcsNDguODUzeiAgICBNMjguNjc2LDM4LjAzMmMwLjAxMy0wLjAzNiwwLjYxNC0xLjYyNiwxLjkyMy0xLjAwOGMxLjEzMywwLjUzNSwwLjk2MSwxLjU2MywwLjg4NywxLjg1Yy0wLjAwNywwLjAyNC0wLjAxNCwwLjA0OC0wLjAyMSwwLjA3MyAgIGMwLDAuMDAxLTAuMDAxLDAuMDA0LTAuMDAxLDAuMDA0bDAsMGMtMC4yNDksMC45MjktMC40MDQsMi4wODYtMC4wMTcsMi44NmMwLjE2LDAuMzE5LDAuNDkyLDAuNzY4LDEuNTQyLDAuOTg3bDAuMzY2LDAuMDc3ICAgYzIwLjgxNiw0LjM2LDM2LDIuOTMzLDQ1LjY3OCwwLjYyNmwtMC4wMDQsMC4wMDJjMCwwLDAuMDA1LTAuMDAyLDAuMDA3LTAuMDAzYzAuMjEyLTAuMDUsMC40MjEtMC4xMDEsMC42MjgtMC4xNTIgICBjMC41MDktMC4wNSwxLjE3MywwLjA3OCwxLjM5OSwxYzAuMzUxLDEuNDI0LTAuOTczLDEuODk1LTEuMjE3LDEuOTY5Yy01LjMyNSwxLjI3OS0xMi4yNjYsMi4zMDYtMjAuODM1LDIuMzA3ICAgYy03LjUwNSwwLTE2LjI1NS0wLjc4Ny0yNi4yNTctMi44ODJsLTAuMzY0LTAuMDc3Yy0yLjEyLTAuNDQyLTMuMTExLTEuNjMzLTMuNTY5LTIuNTU1QzI3Ljk4NSw0MS40MjEsMjguMjgxLDM5LjQxNiwyOC42NzYsMzguMDMyICAgeiI+PC9wYXRoPjxjaXJjbGUgY3g9IjEwLjQ5MyIgY3k9IjIzLjQ1NSIgcj0iMC42MTkiPjwvY2lyY2xlPjxwYXRoIGQ9Ik0yLjA4LDI4LjMwOGMwLjY3Ni0wLjE3OCwwLjk4My0wLjM1MiwxLjE3NC0wLjVDNC42OSwyNi42OSw2LjUsMjcuNDgzLDcuNSwyOC4zNTd2MC4wMDJjMCwwLDEuNzExLDEuMjM1LDAuNzM3LDIuMjAyICAgYy0wLjk3NCwwLjk2NS0yLjMxOSwwLjAwNi0yLjMxOSwwLjAwNmwwLjAzNSwwLjAxNmMtMC4zMjctMC4yMDMtMC42LTAuNTYxLTAuNzgtMC41ODRjLTAuMzcsMC4yNi0wLjg3NiwwLjUtMS40NzYsMC41SDMuNyAgIGMwLDAtMS4zNDUsMC43MDksMC4xNzgsMS42NTJjMC4wMDEsMC4wMDEsMC4wMDIsMC4wNzIsMC4wMDQsMC4wNzNjMy45MzksMi4zNDIsOC4yNzEsNS43MDEsOC4yNzEsOC44OCAgIGMwLDAuNjkxLDAuMiwxNy4wNDIsMTcuNjI2LDI0LjczOWwwLjk2NywwLjQ0MmwtMC4xLDEuMDU5Yy0wLjQyMSw0LjM5LDEuMTQ1LDEwLjE5MSwxMC45OTMsMTIuODg4bDAuMTEzLDAuMDM4ICAgYzAuMDY3LDAuMDIzLDYuNzMyLDIuNDI5LDEwLjkwNywyLjQyOWMxLjU4NCwwLDIuMTU1LTAuMzUyLDIuMjQzLTAuNTYxYzAuMDg1LTAuMjAyLDAuNjEyLTIuMTY0LTYuMzMyLTkuMzg3bDAuMDAyLTAuMTgzICAgYzAsMC0yLjQ3Ny0zLjA3LDEuNTMzLTMuMDdjMC4wMSwwLDAuMDE5LDAsMC4wMjksMGMxLjI4NSwwLDIuNjA4LDAuMjE1LDMuOTgsMC4xODRjNC43NzEtMC4xMTcsOS4zMTYtMC40MjUsMTMuNTA2LTEuMDk2ICAgbDAuNDc0LTAuMDI4bDAuNjY4LDAuMTU4YzkuNjUxLDQuOTQ4LDE2LjczOCw3LjcxNiwxOS43MzgsNy43MTZ2MC4wMDZjMCwwLDAuMTY0LDAuMDExLDAuMjMsMC4wMDQgICBjLTAuMTg5LTAuNzIzLTIuMjMtMi44LTcuMjMtOS4wNzl2MC4wMjFjMCwwLTEuNTEyLTEuNjU4LDAuNzk3LTIuNjUzYzAuMDYzLTAuMDI2LDAuMDA4LDAuMDIzLDAuMDYtMC4wMDEgICBjOC42MzktMy41MDksMTMuNTAxLTguMjA0LDE1LjQxMS0xMS43NzVjMS4xNDUtMi4xMjksMC4yMDYtMi43ODQtMC42NTktMi45NzZjLTAuMzE3LTAuMDM4LTAuNjM0LTAuMDYyLTAuOTEyLTAuMDYyICAgYy0wLjIwNSwwLTAuMzc5LDAuMDEtMC41MjgsMC4wMjdsLTMuMTQzLDEuMjE0QzgzLjczMiw1My45MjYsNzMuMjE4LDU1LjUsNjEuMjIsNTUuNWMtMC4wMDIsMC0wLjAwNSwwLTAuMDA1LDAgICBjLTE1LjEyOCwwLTI5LjEwMS0yLjQzMi0zNi4wODMtMy43NzFsLTAuMTczLTAuMTExbC0wLjE2LTAuMTI2Yy01Ljg1OC0yLjY4MS01LjEzNy0xMC4yMDItNS4xMDMtMTAuNTE5bDAuMDYtMC4zICAgYzAuODk1LTIuODM4LDIuNDY3LTYuMzUyLDUuMjEzLTkuNzE5Yy0xLjgwOC0xLjM2OS00LjU5LTQuMTg4LTQuNDMtOC40OTRjMC4wNDYtMS4yNDQtMC40ODYtMi41MDgtMS40OTgtMy41NTkgICBjLTEuNDk4LTEuNTU1LTMuNzg1LTIuNDQ2LTYuMjc0LTIuNDQ2Yy0xLjc3LDAtMy41NTMsMC40NDItNS4yOTMsMS4zMTRjLTQuMDYxLDIuMDM1LTQuODU1LDQuNzM2LTUuNjkyLDcuNTk2ICAgYy0wLjEzNiwwLjQ2OC0wLjI4NCwwLjkzOS0wLjQzOCwxLjQxYy0wLjAwNiwwLjAxOS0wLjAyMiwwLjAzNS0wLjAyOCwwLjA1NkMwLjgzMywyOC40MjMsMS42OTEsMjguMzksMi4wOCwyOC4zMDh6IE0xMC40OTMsMTkuOTA4ICAgYzEuOTU2LDAsMy41NDgsMS41OTEsMy41NDgsMy41NDdjMCwxLjk1Ny0xLjU5MiwzLjU0OC0zLjU0OCwzLjU0OGMtMS45NTcsMC0zLjU0OC0xLjU5Mi0zLjU0OC0zLjU0OCAgIEM2Ljk0NCwyMS40OTksOC41MzYsMTkuOTA4LDEwLjQ5MywxOS45MDh6Ij48L3BhdGg+PC9nPjwvc3ZnPg==';
|
||||
|
||||
function ListItem(props) {
|
||||
return (
|
||||
<View style={styles.row}>
|
||||
<View style={styles.column1}>
|
||||
<Image source={props.imageSource} style={styles.icon} />
|
||||
</View>
|
||||
<View style={styles.column2}>
|
||||
<View style={styles.textBox}>
|
||||
<Text>Text Text Text</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.column3}>
|
||||
<Button onPress={() => {}} style={styles.smallButton} title="Button" />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function TextAlignmentExample(props) {
|
||||
return (
|
||||
<Block description={props.description} title={props.title}>
|
||||
<View>
|
||||
<Text style={props.style}>Left-to-Right language text alignment.</Text>
|
||||
<Text style={props.style}>
|
||||
{'\u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 ' +
|
||||
'\u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631 ' +
|
||||
'\u0627\u0644\u0644\u063A\u0629 \u062F\u0648\u0646 ' +
|
||||
'\u0645\u062D\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635'}
|
||||
</Text>
|
||||
<Text style={props.style}>
|
||||
{'\u05DE\u05D9\u05DE\u05D9\u05DF \u05DC\u05E9\u05DE\u05D0\u05DC ' +
|
||||
'\u05D4\u05E9\u05E4\u05D4 \u05D1\u05DC\u05D9 ' +
|
||||
'\u05D9\u05D9\u05E9\u05D5\u05E8 \u05D8\u05E7\u05E1\u05D8'}
|
||||
</Text>
|
||||
</View>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
|
||||
function withRTLState(Component) {
|
||||
return class extends React.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.state = {
|
||||
isRTL: false
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const isRTL = this.state.isRTL;
|
||||
const setRTL = (isRTL) => this.setState({ isRTL: isRTL });
|
||||
return <Component isRTL={isRTL} setRTL={setRTL} />;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const RTLToggler = ({ isRTL, setRTL }) => {
|
||||
const toggleRTL = () => setRTL(!isRTL);
|
||||
return (
|
||||
<Button
|
||||
accessibilityLabel="Change layout direction"
|
||||
color="gray"
|
||||
onPress={toggleRTL}
|
||||
title={isRTL ? 'RTL' : 'LTR'}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const PaddingExample = withRTLState(({ isRTL, setRTL }) => {
|
||||
const color = 'teal';
|
||||
|
||||
return (
|
||||
<Block title={'padding{Start,End}'}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>paddingStart: 50,</Text>
|
||||
<Text>paddingEnd: 10</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<Text>The {color} is padding.</Text>
|
||||
<View
|
||||
dir={isRTL ? 'rtl' : 'ltr'}
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
paddingStart: 50,
|
||||
paddingEnd: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: color
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
paddingTop: 5,
|
||||
paddingBottom: 5,
|
||||
borderLeftWidth: 1,
|
||||
borderRightWidth: 1,
|
||||
borderColor: 'gray'
|
||||
}}
|
||||
>
|
||||
<RTLToggler isRTL={isRTL} setRTL={setRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</Block>
|
||||
);
|
||||
});
|
||||
|
||||
const MarginExample = withRTLState(({ isRTL, setRTL }) => {
|
||||
return (
|
||||
<Block title={'margin{Start,End}'}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>marginStart: 50,</Text>
|
||||
<Text>marginEnd: 10</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<Text>The green is margin.</Text>
|
||||
<View
|
||||
dir={isRTL ? 'rtl' : 'ltr'}
|
||||
style={{
|
||||
backgroundColor: 'green',
|
||||
borderWidth: 1,
|
||||
borderColor: 'green'
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
paddingTop: 5,
|
||||
paddingBottom: 5,
|
||||
marginStart: 50,
|
||||
marginEnd: 10,
|
||||
borderLeftWidth: 1,
|
||||
borderRightWidth: 1,
|
||||
borderColor: 'gray'
|
||||
}}
|
||||
>
|
||||
<RTLToggler isRTL={isRTL} setRTL={setRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</Block>
|
||||
);
|
||||
});
|
||||
|
||||
const PositionExample = withRTLState(({ isRTL, setRTL }) => {
|
||||
return (
|
||||
<Block title={'position: "start" | "end"'}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>start: 50</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<Text>The orange is position.</Text>
|
||||
<View
|
||||
dir={isRTL ? 'rtl' : 'ltr'}
|
||||
style={{
|
||||
backgroundColor: 'orange',
|
||||
borderWidth: 1,
|
||||
borderColor: 'orange'
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
start: 50,
|
||||
borderColor: 'gray'
|
||||
}}
|
||||
>
|
||||
<RTLToggler isRTL={isRTL} setRTL={setRTL} />
|
||||
</View>
|
||||
</View>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>end: 50</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<Text>The orange is position.</Text>
|
||||
<View
|
||||
dir={isRTL ? 'rtl' : 'ltr'}
|
||||
style={{
|
||||
backgroundColor: 'orange',
|
||||
borderWidth: 1,
|
||||
borderColor: 'orange'
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
end: 50,
|
||||
borderColor: 'gray'
|
||||
}}
|
||||
>
|
||||
<RTLToggler isRTL={isRTL} setRTL={setRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</Block>
|
||||
);
|
||||
});
|
||||
|
||||
const BorderWidthExample = withRTLState(({ isRTL, setRTL }) => {
|
||||
return (
|
||||
<Block title={'border{Start,End}Width'}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>borderStartWidth: 10,</Text>
|
||||
<Text>borderEndWidth: 50</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<View dir={isRTL ? 'rtl' : 'ltr'}>
|
||||
<View
|
||||
style={{
|
||||
borderStartWidth: 10,
|
||||
borderEndWidth: 50
|
||||
}}
|
||||
>
|
||||
<View>
|
||||
<RTLToggler isRTL={isRTL} setRTL={setRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Block>
|
||||
);
|
||||
});
|
||||
|
||||
const BorderColorExample = withRTLState(({ isRTL, setRTL }) => {
|
||||
return (
|
||||
<Block title={'border{Start,End}Color'}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>borderStartColor: 'red',</Text>
|
||||
<Text>borderEndColor: 'green',</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<View dir={isRTL ? 'rtl' : 'ltr'}>
|
||||
<View
|
||||
style={{
|
||||
borderStartColor: 'red',
|
||||
borderEndColor: 'green',
|
||||
borderLeftWidth: 20,
|
||||
borderRightWidth: 20,
|
||||
padding: 10
|
||||
}}
|
||||
>
|
||||
<View>
|
||||
<RTLToggler isRTL={isRTL} setRTL={setRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Block>
|
||||
);
|
||||
});
|
||||
|
||||
const BorderRadiiExample = withRTLState(({ isRTL, setRTL }) => {
|
||||
return (
|
||||
<Block title={'border{Top,Bottom}{Start,End}Radius'}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>borderTopStartRadius: 10,</Text>
|
||||
<Text>borderTopEndRadius: 20,</Text>
|
||||
<Text>borderBottomStartRadius: 30,</Text>
|
||||
<Text>borderBottomEndRadius: 40</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<View dir={isRTL ? 'rtl' : 'ltr'}>
|
||||
<View
|
||||
style={{
|
||||
borderWidth: 10,
|
||||
borderTopStartRadius: 10,
|
||||
borderTopEndRadius: 20,
|
||||
borderBottomStartRadius: 30,
|
||||
borderBottomEndRadius: 40,
|
||||
padding: 10
|
||||
}}
|
||||
>
|
||||
<View>
|
||||
<RTLToggler isRTL={isRTL} setRTL={setRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Block>
|
||||
);
|
||||
});
|
||||
|
||||
function Block(props) {
|
||||
let description;
|
||||
if (props.description) {
|
||||
description = <Text style={blockStyles.descriptionText}>{props.description}</Text>;
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={blockStyles.container}>
|
||||
<View style={blockStyles.titleContainer}>
|
||||
<Text style={blockStyles.titleText}>{props.title}</Text>
|
||||
{description}
|
||||
</View>
|
||||
<View style={blockStyles.children}>{props.children}</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const blockStyles = StyleSheet.create({
|
||||
container: {
|
||||
borderRadius: 3,
|
||||
borderWidth: 0.5,
|
||||
borderColor: '#d6d7da',
|
||||
backgroundColor: '#ffffff',
|
||||
margin: 10,
|
||||
marginVertical: 5,
|
||||
overflow: 'hidden'
|
||||
},
|
||||
titleContainer: {
|
||||
borderBottomWidth: 0.5,
|
||||
borderTopLeftRadius: 3,
|
||||
borderTopRightRadius: 2.5,
|
||||
borderBottomColor: '#d6d7da',
|
||||
backgroundColor: '#f6f7f8',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 10
|
||||
},
|
||||
titleText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500'
|
||||
},
|
||||
descriptionText: {
|
||||
fontSize: 14
|
||||
},
|
||||
disclosure: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
padding: 10
|
||||
},
|
||||
disclosureIcon: {
|
||||
width: 12,
|
||||
height: 8
|
||||
},
|
||||
children: {
|
||||
margin: 10
|
||||
}
|
||||
});
|
||||
|
||||
class LayoutRTLExample extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
toggleStatus: {},
|
||||
isRTL: false,
|
||||
containerWidth: 0
|
||||
};
|
||||
|
||||
this._onDirectionChange = this._onDirectionChange.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ScrollView dir={this.state.isRTL ? 'rtl' : 'ltr'} style={[styles.container]}>
|
||||
<Block title={'Current layout direction'}>
|
||||
<View dir="ltr" style={styles.directionBox}>
|
||||
<Text style={styles.directionText}>
|
||||
{this.state.isRTL ? 'Right-to-Left' : 'Left-to-Right'}
|
||||
</Text>
|
||||
<Switch onValueChange={this._onDirectionChange} value={this.state.isRTL} />
|
||||
</View>
|
||||
</Block>
|
||||
|
||||
<TextAlignmentExample
|
||||
description={'Depends on the text content.'}
|
||||
style={styles.fontSizeSmall}
|
||||
title={'Default text alignment'}
|
||||
/>
|
||||
<TextAlignmentExample
|
||||
style={[styles.fontSizeSmall, styles.textAlignLeft]}
|
||||
title={'textAlign: "left"'}
|
||||
/>
|
||||
<TextAlignmentExample
|
||||
style={[styles.fontSizeSmall, styles.textAlignRight]}
|
||||
title={'textAlign: "right"'}
|
||||
/>
|
||||
<TextAlignmentExample
|
||||
style={[styles.fontSizeSmall, styles.textAlignStart]}
|
||||
title={'textAlign: "start"'}
|
||||
/>
|
||||
<TextAlignmentExample
|
||||
style={[styles.fontSizeSmall, styles.textAlignEnd]}
|
||||
title={'textAlign: "end"'}
|
||||
/>
|
||||
<PaddingExample />
|
||||
<MarginExample />
|
||||
<PositionExample />
|
||||
<BorderColorExample />
|
||||
<BorderWidthExample />
|
||||
<BorderRadiiExample />
|
||||
|
||||
<Block title={'A simple list-item layout'}>
|
||||
<View style={styles.list}>
|
||||
<ListItem imageSource={{ uri: 'https://picsum.photos/130/130?image=222' }} />
|
||||
<ListItem imageSource={{ uri: 'https://picsum.photos/130/130?image=250' }} />
|
||||
</View>
|
||||
</Block>
|
||||
|
||||
<Block title={'Working with icons'}>
|
||||
<View style={[styles.flexDirectionRow, { justifyContent: 'space-around' }]}>
|
||||
<View style={{ alignItems: 'center' }}>
|
||||
<Image source={iconSource} style={styles.image} />
|
||||
<Text style={styles.fontSizeSmall}>No RTL flip</Text>
|
||||
</View>
|
||||
<View style={{ alignItems: 'center' }}>
|
||||
<Image
|
||||
source={iconSource}
|
||||
style={[styles.image, { transform: [{ scaleX: this.state.isRTL ? -1 : 1 }] }]}
|
||||
/>
|
||||
<Text style={styles.fontSizeSmall}>RTL flip</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Block>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
_onDirectionChange() {
|
||||
this.setState({ isRTL: !this.state.isRTL });
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
width: '100%'
|
||||
},
|
||||
directionBox: {
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#f8f8f8',
|
||||
borderWidth: 0.5,
|
||||
borderColor: 'black'
|
||||
},
|
||||
directionText: {
|
||||
padding: 10,
|
||||
fontSize: 16,
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
switchRow: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 5
|
||||
},
|
||||
list: {
|
||||
height: 120,
|
||||
marginBottom: 5,
|
||||
borderTopWidth: 0.5,
|
||||
borderLeftWidth: 0.5,
|
||||
borderRightWidth: 0.5,
|
||||
borderColor: '#e5e5e5'
|
||||
},
|
||||
row: {
|
||||
height: 60,
|
||||
flexDirection: 'row',
|
||||
borderBottomWidth: 0.5,
|
||||
borderColor: '#e5e5e5'
|
||||
},
|
||||
column1: {
|
||||
width: 60,
|
||||
padding: 6
|
||||
},
|
||||
column2: {
|
||||
flex: 1,
|
||||
padding: 6
|
||||
},
|
||||
column3: {
|
||||
justifyContent: 'center',
|
||||
padding: 6
|
||||
},
|
||||
icon: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderWidth: 0.5,
|
||||
borderColor: '#e5e5e5'
|
||||
},
|
||||
image: {
|
||||
width: 48,
|
||||
height: 48
|
||||
},
|
||||
img: {
|
||||
width: IMAGE_SIZE[0] / SCALE,
|
||||
height: IMAGE_SIZE[1] / SCALE
|
||||
},
|
||||
view: {
|
||||
flex: 1
|
||||
},
|
||||
block: {
|
||||
padding: 10,
|
||||
alignItems: 'center'
|
||||
},
|
||||
smallButton: {
|
||||
height: 24,
|
||||
width: 64
|
||||
},
|
||||
fontSizeSmall: {
|
||||
fontSize: 14
|
||||
},
|
||||
fontSizeExtraSmall: {
|
||||
fontSize: 12
|
||||
},
|
||||
textAlignLeft: {
|
||||
textAlign: 'left'
|
||||
},
|
||||
textAlignRight: {
|
||||
textAlign: 'right'
|
||||
},
|
||||
textAlignStart: {
|
||||
textAlign: 'start'
|
||||
},
|
||||
textAlignEnd: {
|
||||
textAlign: 'end'
|
||||
},
|
||||
flexDirectionRow: {
|
||||
flexDirection: 'row'
|
||||
},
|
||||
bold: {
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
rtlToggler: {
|
||||
color: 'gray',
|
||||
padding: 8,
|
||||
textAlign: 'center',
|
||||
fontWeight: '500'
|
||||
}
|
||||
});
|
||||
|
||||
export default function LocalizationPage() {
|
||||
return (
|
||||
<Example title="Localized layout">
|
||||
<LayoutRTLExample />
|
||||
</Example>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user