画像内にフレックスボックスの位置付けテキスト

Question

私はReact Nativeを使用していて、特定のレイアウトを作成しようとしています。

私は画像を縦方向に&の中心に（ビュー内に）、画像の上にいくつかのテキストを縦方向に&のように水平に配置しました。テキストはイメージ/バックグラウンドイメージの上に来る必要があるので、イメージタグの中に入れます。

このテキストの内容は非常に長くなる可能性があります。イメージタグ内にあるため、ラップします。

テキスト内のコンテンツが折り返されずに画像の上に表示されるようにするにはどうすればよいですか？

これまで

マイレイアウト：

私は

私のコードを達成しようとしていレイアウト：

の

<TouchableHighlight onPress={onPress}> 
    <View style={styles.categoryContainer}> 
    <View style={styles.leftContainer}> 
     <View style={styles.categoryIndexContainer}> 
     <Text style={styles.categoryIndex}>01</Text> 
     </View> 
    </View> 
    <View style={styles.middleContainer}> 
     <Image source={img} style={styles.categoryImage}> 
     <Text style={styles.categoryName}>Some very long title name</Text> 
     </Image> 
    </View> 
    <View style={styles.rightContainer}></View> 
    </View> 
</TouchableHighlight> 

const styles = StyleSheet.create({ 
    categoryContainer: { 
    flexDirection: 'row', 
    }, 
    leftContainer: { 
    width: 50, 
    paddingLeft: 15, 
    paddingTop: 30, 
    }, 
    middleContainer: { 
    alignItems: 'center', 
    justifyContent: 'center', 
    flex: 1, 
    flexDirection: 'row', 
    }, 
    rightContainer: { 
    width: 50, 
    }, 
    categoryName: { 
    color: '#ffffff', 
    fontWeight: 'bold', 
    fontSize: 40, 
    textAlign: 'center', 
    backgroundColor: 'transparent', 
    flexWrap: 'nowrap', 
    }, 
    categoryImage: { 
    alignItems:'center', 
    justifyContent:'center', 
    flexWrap: 'nowrap', 
    }, 
}) 

おかげ

Answer 1

あなたはcategoryNameスタイルに指定する必要があります：あなたはImage上Textを配置するまでposition: 'absolute'はその後top、left、right、bottom属性を設定します。