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

我可能在你的**投票中感到很痛苦，但我知道我在Flexbox上的方式。

看到您的代码，我可以告诉您没有制作正确的代码来获得预期的结果。

如果您想要左侧的按钮和中间的按钮，则需要创建3个框：左侧，中间，右侧。

右边是空的，中心是中心元素，左边是＃34;默认＆＃34;。

我在下面做了一个片段来解释它，遗憾的是我不太了解React，所以我会让你把它翻译成反应来尝试。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

编辑我认为这将是

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%'
  }
});

React Native flex单独对齐组件

1 个答案: