テキストを背景に置くと文字の折り返しが発生する反応ネイティブの画像

Question

何らかの理由で、Image内にTextを配置すると折り返しが止まります。私はflexWrap: 'wrap'を試しましたが、それは役に立ちません。ここで

は、私はそれがOK働くよりも、画像の外にテキストを置く場合、それは

どのように見えるかです。ここで

はコードです：

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

理由はここに完全なプロジェクトをプッシュしましたフレックスボックスを定義する "コンテナ"スタイル。 をtextContainerまたはtextのいずれかのスタイルに配置してください。