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次(失败)尝试。
答案 0 :(得分:1)
我可能在你的**投票中感到很痛苦,但我知道我在Flexbox上的方式。
看到您的代码,我可以告诉您没有制作正确的代码来获得预期的结果。
如果您想要左侧的按钮和中间的按钮,则需要创建3个框:左侧,中间,右侧。
右边是空的,中心是中心元素,左边是#34;默认&#34;。
我在下面做了一个片段来解释它,遗憾的是我不太了解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%;
}
&#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%'
}
});