当放在背景上时文本停止环绕图像在反应原生

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样式上。