react-native flexbox子內部元素

Question

使用react-native。如何讓文字顯示在內部（而不是背景圖像）？

 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的，但林不知道......

Answer 1

嘗試：

<Image 
      source={require('../img/example.jpg')} 
      style={styles.backgroundImage} 
      blurRadius={1}> 

      <View style={styles.content}> 
       <Text style={styles.logo}> Example Text </Text> 

      </View> 
</Image>