當放在背景上時文本停止環繞圖像在反應原生

Question

由於某些原因，當我將文本放在圖像中時，它會停止環繞。我試過flexWrap: 'wrap'但它沒有幫助。

這裏是如何看起來像

如果我把圖像的文本外比它的工作原理確定。

下面是代碼：

class wraptest extends Component { 
render() { 
    return (
    <View style={styles.container}> 
    <Image 
     source={require('./image.jpg')} 
     style={styles.image}> 
     <View style={styles.textContainer}> 
     <Text style={styles.text}>Text goes here.</Text> 
     </View> 
    </Image> 
    </View> 
); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
    image: { 
    flex: 1, 
    resizeMode: 'cover', 
    justifyContent: 'center', 
    }, 
    textContainer: { 
    backgroundColor: 'transparent', 
    alignItems: 'center', 
    }, 
    text: { 
    fontSize: 40, 
    fontWeight: 'bold' 
    } 
}); 

我也推高整個項目在這裏https://github.com/OleksandrBezhan/react-native-text-wrap-test

Answer 1

當它是圖像之外的文本換行的原因是因爲它的直接子定義柔性盒的「容器」樣式。嘗試將flex: 1放在textContainer或text樣式上。