0
使用react-native。如何讓文字顯示在內部(而不是背景圖像)?react-native flexbox子內部元素
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity,
AsyncStorage,
} from 'react-native';
import { Navigator } from 'react-native-deprecated-custom-components';
export default class Test extends Component {
render() {
return (
<View style={styles.container}>
<Image
source={require('../img/example.jpg')}
style={styles.backgroundImage}
blurRadius={1} />
<View style={styles.content}>
<Text style={styles.logo}> Example Text </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
backgroundImage: {
flex: 1,
alignSelf: 'stretch',
width: null,
justifyContent: 'center',
},
content: {
alignItems: 'center',
},
logo: {
color: 'white',
fontSize: 40,
fontStyle: 'italic',
fontWeight: 'bold',
textShadowColor: '#252525',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 15,
marginBottom: 20,
}
});
正如你所看到的,在上面的例子中,文本顯示和backgroundImage之外......也許是一些與Flexbox的,但林不知道......