이게 꽤 혼동됩니다.

• 위 4개는 flexDirection: 'column' 일 때.
• 아래 4개는 flexDirection: 'row' 일 때.

Source Code

  renderFlex() {
    return (
      <ScrollView style={{ width: '100%' }}>
        <View style={{ width: '100%', backgroundColor: '#eaeaef', ...centering }}>
          {this.renderView('flex-start', 'flex-start', 'column')}
          {this.renderView('flex-start', 'flex-end', 'column')}
          {this.renderView('flex-end', 'flex-start', 'column')}
          {this.renderView('flex-end', 'flex-end', 'column')}
        </View>


        <View style={{ width: '100%', backgroundColor: '#eaeaef', ...centering }}>
          {this.renderView('flex-start', 'flex-start', 'row')}
          {this.renderView('flex-start', 'flex-end', 'row')}
          {this.renderView('flex-end', 'flex-start', 'row')}
          {this.renderView('flex-end', 'flex-end', 'row')}
        </View>
      </ScrollView>
    );
  }

  renderView(justify, align, dir) {
    return (
      <View>
        <MText style={esty.tx}>{`[ ${dir} ] : justifyContent: ${justify}, alignItems: ${align}`}</MText>
        <View style={{
          flexDirection: dir, width: 100, height: 60, justifyContent: justify,
          borderWidth: 1, borderColor: '#aaf',
          alignItems: align }}
        >
          <View style={{ width: 30, height: 30, backgroundColor: '#aaa' }} />
          {/* <View style={{ width: 30 height: backgroundColor: aae />
        <View style={{ width: 30 height: backgroundColor: aea /> */}
        </View>
      </View>
    );
  }