web-dev-qa-db-ja.com

各子を独立して正当化する方法（左、右、中央）

反応ネイティブでは私が持っています：

<View style={styles.navBar}>
  <Text>{'<'}</Text>
    <Text style={styles.navBarTitle}>
      Fitness & Nutrition Tracking
    </Text>
  <Image source={icon} style={styles.icon}/>
</View>

これらのスタイルで：

{
    navBar: {
        height: 60,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    navBarTitle: {
        textAlign: 'center',
    },
    icon: {
        height: 60,
        resizeMode: 'contain',
    },
}

これは私が得る効果です：

undesired

これは私が望む効果です：

desired

最初の例では、アイテム間の間隔は等しくなっています。

2番目の例では、各アイテムは異なる方法で正当化されます。最初の項目は左寄せされます。 2番目の項目は中央揃えです。 3番目、右揃え。

この質問 は似ていますが、反応ネイティブはmargin: 'auto'をサポートしていないようです。さらに、他の回答は、左揃えと右揃えのみを考慮する場合にのみ機能しますが、自動マージンなしで中央揃えに実際に対処する人はいません。

反応ネイティブのナビゲーションバーを作成しようとしています。 Vanilla iosバージョンは次のようになります。

ios

同様のことを行うにはどうすればよいですか？私は主にセンタリングに関心があります。

react-nativeflexbox
33
Croolsby

1つの方法は、3つの異なる領域にネストされたビュー（フレックスコンテナ）を使用し、flex：1を左右の領域に設定することです。

<View style={styles.navBar}>
  <View style={styles.leftContainer}>
    <Text style={[styles.text, {textAlign: 'left'}]}>
      {'<'}
    </Text>
  </View>
  <Text style={styles.text}>
    Fitness & Nutrition Tracking
  </Text>
  <View style={styles.rightContainer}>
    <View style={styles.rightIcon}/>
  </View>
</View>

const styles = StyleSheet.create({
  navBar: {
    height: 60,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'blue',
  },
  leftContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    backgroundColor: 'green'
  },
  rightContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  rightIcon: {
    height: 10,
    width: 10,
    resizeMode: 'contain',
    backgroundColor: 'white',
  }
});

enter image description here

57
agent_hunt

marginLeft: 'auto'を中央のコンポーネントに設定することもできます。右に押す必要があります。 React Native

ソース： https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

3
to7be

NavigatorモジュールのNavigationBarを使用している場合は、私の質問を参照してください。 Navigator.NavigationBar（タイトル）のデフォルトスタイルの変更

2
Mark Silver