对项

Question

我制作了一个标题，我想实现一个播放按钮并将其放在与我的标题相同的行的右侧。

这是我的标题

class SectionHeader extends Component {
render() {
    return (
        <View style={styles.header}>  
            <Text style={styles.headertext}>
            {this.props.section.title}       
            </Text>
            <TouchableOpacity style={styles.button}>
            <Text style ={styles.Play}>Play
            </Text>
            </TouchableOpacity>
        </View>
    );
}
}

这是我的样式列表

const styles = StyleSheet.create({  
header:{
    flex: 1,
    backgroundColor: 'rgb(77,120, 140)',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
},
headertext:{
    fontSize: 25,
    fontWeight: 'bold',
    color: 'white',
    margin: 20,
},
button:{
        alignItems: 'flex-end',
        justifyContent: 'flex-end',
    },
play:{
    textAlign: 'center',
    fontSize: 20,
    color: 'white',       
    width: 45,
    height: 35,
    backgroundColor: '#00BCD4',
    margin: 20,
}, 
});

这是输出。如您所见，显示了Cluster 1和播放按钮。我想将cluster1放在中间，而右边的播放按钮放在中间而不是中间

Answer 1

因为flex box的工作方式可以达到你想要的效果，所以你需要在标题中添加一个额外的空Text元素，然后在标题样式集justifyContent: 'space-between'上添加。如果您这样做，则可以从按钮中删除alignItems和justifyContent属性。

要将按钮放在最后，您必须使用alignSelf: 'flex-end'而不是alignContent，因为元素样式将引用自身而不是其子对齐。

在flexbox上有一个名为Flexbox Zombies的免费在线课程。相信我，当我告诉你学习所有flex属性会很有趣时，你再也不会忘记它们了。

Answer 2

我通常这样做的方法是设置标题的样式以使用justifyContent作为＆＃39; space-between＆＃39;然后将一个空视图作为第一个项目（在标题之前）。