javascript - React Native Flex 单独对齐组件

Question

https://snack.expo.io/ryBiTXJSf

import React, { Component } from 'react';
import { View, StyleSheet, Button } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View>
        <View style={styles.container}>
          <Button title="left" style={styles.button} />
          <Button title="center" style={styles.button} />
          <View style={styles.button} />
        </View>
        <View style={styles.container2}>
          <View style={styles.buttonLeft}>
            <Button title="left" />
          </View>
          <View style={styles.buttonCenter}>
            <Button title="center" />
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingTop: 50,
    backgroundColor: '#ecf0f1',
  },
  container2: {
    flexDirection: 'row',
  },
  button: {
    // flex: 1,
  },
  buttonLeft: {
    alignItems: 'left',
  },
  buttonCenter: {
    alignItems: 'center',
  },
});

我在同一行有 2 个按钮。我希望一个按钮向左对齐，另一个按钮向中心对齐。

我怎样才能做到这一点？ (如果您设法使其正常工作，请分享您的小吃链接)

上面的代码显示了 2 次(失败)尝试。

Answer 1

如果您想要左侧一个按钮，中间一个按钮，则需要创建 3 个框:左、中、右。

右侧为空，中心为元素居中，左侧保持“默认”。

我在下面做了一个片段来解释它，不幸的是我对 React 还不够了解，所以我会让你把它翻译成 React 来尝试。

.container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #ecf0f1;
  }
  
.left {
    align-items: left;
}
  
.center {
    align-items: center;
    text-align: center;
}

.item {
  flex: 1 1 33%;
  width: 33%;
}

<div class="container">
  <div class="item left"><button>Left button</button></div>
  <div class="item center"><button>Center button</button></div>
  <div class="item right"></div>
</div>

编辑我认为这将是

return (
  <View>
    <View style={styles.container}>
      <View style={styles.left, styles.item}><Button title="left"/></View>
      <View style={styles.center, styles.item}><Button title="center"/></View>
      <View style={styles.right, styles.item}></View>
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  left: {
    alignItems: 'left'
  },
  center: {
    alignItems: 'center',
    textAlign: 'center'
  },
  item {
    flex: '1 1 33%',
    width: '33%'
  }
});