フレックスボックスコンテナに固定サイズとダイナミックサイズの要素を混在させるにはどうすればいいですか？

Question

私はフレキシボックス」自動サイズを利用しても、固定サイズの項目が含まれているレイアウトを作成しようとしている：

<View style={{ height: 70, alignItems: "center" }}> 
    <Text style={{ flex: 1, textAlign: "right", paddingRight: 10 }}>left text</Text> 
    <Image style={{ width: 70, height: 70 }} src={require('./img.png')} /> 
    <Text style={{ flex: 1, textAlign: "left", paddingLeft: 10 }}>right text</Text> 
</View> 

私は画像をUIに集中したいとテキストビューが均等に残りを取るしています幅。実際の結果は、レンダリングがイメージビューの幅を考慮しないかのように、テキストビューの1つが他のビューよりも大きくなることです。

Answer 1

最後にこれを行う正しい方法が見つかりました。フレックスレイアウトで固定サイズのアイテムを使用するには、width/heightではなく、flex：0とflexBasisを使用します。私のコンポーネントをラップするコンポーネントのサイズが正しくなく、フレックスレンダリングがうまくいかなかったため、このアプローチは当初はうまくいかなかった。 flexBasisは、絶対数に設定すると密度に依存しないピクセルのようです。

Proof of concept on expo.io

import React, { Component } from 'react'; 
import { Text, View, StyleSheet } from 'react-native'; 
import { Constants } from 'expo'; 

export default class App extends Component { 
    render() { 
    return (
     <View> 
     <Text>Test</Text> 
     <View style={styles.container}> 
      <Text style={styles.text1}>{"Left\nText"}</Text> 
      <View style={styles.view} /> 
      <Text style={styles.text2}>Test</Text> 
     </View> 
     <View style={styles.container}> 
      <Text style={styles.text1}>{"Left\nText"}</Text> 
      <View style={styles.view} /> 
      <Text style={styles.text2}>Test</Text> 
     </View> 
     <View style={styles.container}> 
      <Text style={styles.text1}>{"Left\nText"}</Text> 
      <View style={styles.view} /> 
      <Text style={styles.text2}>Test</Text> 
     </View> 
     <Text>Test</Text> 
     <View style={styles.container}> 
      <Text style={styles.text1}>{"Left\nText"}</Text> 
      <View style={styles.view} /> 
      <Text style={styles.text2}>Test</Text> 
     </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flexDirection: "row", 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#ecf0f1', 
    }, 
    view: { 
    flex: 0, 
    flexBasis: 50, 
    height: 50, 
    backgroundColor: "red", 
    }, 
    text1: { 
    flex: 1, 
    textAlign: "right", 
    paddingRight: 10, 
    }, 
    text2: { 
    flex: 1, 
    textAlign: "left", 
    paddingLeft: 10, 
    } 
});