mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-04-24 04:25:27 +08:00
10ef2bfe20
1. Fix auto-flipping of styles The StyleRegistry didn't account for LTR/RTL when caching the results of style resolution. The 'writingDirection' style is no longer flipped; no clear use case for it. 2. Remove experimental '$noI18n' style prop suffix This feature is essentially unused, and less likely to be used with the introduction of 'dir=auto' on 'Text'. Removing also marginally improves render performance.
91 lines
2.2 KiB
JavaScript
91 lines
2.2 KiB
JavaScript
import { storiesOf } from '@kadira/storybook';
|
|
import { I18nManager, StyleSheet, TouchableHighlight, Text, View } from 'react-native'
|
|
import React, { Component } from 'react';
|
|
|
|
class I18nManagerExample extends Component {
|
|
componentWillUnmount() {
|
|
I18nManager.setPreferredLanguageRTL(false)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text accessibilityRole='heading' style={styles.welcome}>
|
|
LTR/RTL layout example!
|
|
</Text>
|
|
<Text style={styles.text}>
|
|
The writing direction of text is automatically determined by the browser, independent of the global writing direction of the app.
|
|
</Text>
|
|
<Text style={[ styles.text, styles.rtlText ]}>
|
|
أحب اللغة العربية
|
|
</Text>
|
|
<Text style={[ styles.text, styles.textAlign ]}>
|
|
textAlign toggles
|
|
</Text>
|
|
<View style={styles.horizontal}>
|
|
<View style={[ styles.box, { backgroundColor: 'lightblue' } ]}>
|
|
<Text>One</Text>
|
|
</View>
|
|
<View style={[ styles.box ]}>
|
|
<Text>Two</Text>
|
|
</View>
|
|
</View>
|
|
<TouchableHighlight
|
|
onPress={this._handleToggle}
|
|
style={styles.toggle}
|
|
underlayColor='rgba(0,0,0,0.25)'
|
|
>
|
|
<Text>Toggle LTR/RTL</Text>
|
|
</TouchableHighlight>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
_handleToggle = () => {
|
|
I18nManager.setPreferredLanguageRTL(!I18nManager.isRTL)
|
|
this.forceUpdate();
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: '#F5FCFF',
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
padding: 10
|
|
},
|
|
welcome: {
|
|
fontSize: 28,
|
|
marginVertical: 10
|
|
},
|
|
text: {
|
|
color: '#333333',
|
|
fontSize: 18,
|
|
marginBottom: 5
|
|
},
|
|
textAlign: {
|
|
textAlign: 'left'
|
|
},
|
|
horizontal: {
|
|
flexDirection: 'row',
|
|
marginVertical: 10
|
|
},
|
|
box: {
|
|
borderWidth: 1,
|
|
flex: 1
|
|
},
|
|
toggle: {
|
|
alignSelf: 'center',
|
|
borderColor: 'black',
|
|
borderStyle: 'solid',
|
|
borderWidth: 1,
|
|
marginTop: 10,
|
|
padding: 10
|
|
}
|
|
})
|
|
|
|
storiesOf('api: I18nManager', module)
|
|
.add('RTL layout', () => (
|
|
<I18nManagerExample />
|
|
))
|