在React Native中对齐按钮

Question

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, FlatList, Image, Button } from 'react-native';

export default class ListItems extends Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <FlatList
            data={this.props.text}
            renderItem={(info) => (
                <TouchableOpacity onPress={() =>   this.props.selected(info.item.key)}>
                    <View style={styles.listitems}>
                        <Image resizeMode="contain" source={info.item.image} style={styles.image} />
                        <Text>{info.item.value}</Text>
                        <View style={styles.button}>
                        <Button title="Confirm" color="blue" onPress={this.props.itemDelete}></Button>
                        </View>
                    </View>
                </TouchableOpacity>
            )}
        >
        </FlatList>
        );
     }
 }

const styles = StyleSheet.create({
listitems: {
    width: "100%",
    flex:1,
    marginTop: 5,
    backgroundColor: "lightgrey",
    padding: 10,
    flexDirection: 'row',
},
image: {
    marginRight: 8,
    height: 30,
    alignItems: "center",
    width: 40,
},
button: {
    width: "40%",
    alignItems: 'flex-end',
}
 })

我正在显示列表项目，其中我左边有一个小图像然后是文本，我希望我的按钮出现在最右边，但是使用alignItems：'flex-end'显示在中心。我应该怎么做..我想不使用positon.这样做

Answer 1

我认为那更好。

    renderItem={(info) => (
                <TouchableOpacity style={styles.itemWrapper} onPress={() =>   this.props.selected(info.item.key)}>
                    <View style={styles.itemImageContainer}>
                        <Image resizeMode="contain" source={info.item.image} style={styles.image} />
                        <Text>{info.item.value}</Text>
                    </View>
                    <View style={styles.button}>
                        <Button title="Confirm" color="blue" onPress={this.props.itemDelete}></Button>
                    </View>
                </TouchableOpacity>
            )}

const styles = StyleSheet.create({
itemWrapper: {
    flex:1,
    height: 70,
    marginTop: 5,
    backgroundColor: "lightgrey",
    padding: 10,
    flexDirection: 'row',
},
itemImageContainer: {
    flex: 2,
    alignItems: 'center',
},
image: {
    marginRight: 8,
    height: 30,
    width: 40,
},
buttonContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
}
 })

Answer 2

你可以使用flex-end，flex-start，center来调整项目。你必须在父组件中添加flex direction :'row'

buttonContainer: {
justifyContent: 'flex-end',}

Answer 3

只需添加justifyContent：'space-between'，alignItems：'center'到styles.listitems这将解决您的问题。

Answer 4

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, FlatList, Image, Button } from 'react-native';

export default class ListItems extends Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <FlatList
            data={this.props.text}
            renderItem={(info) => (
                <TouchableOpacity onPress={() =>   this.props.selected(info.item.key)}>
                    <View style={styles.listitems}>
                      <View>
                        <Image resizeMode="contain" source={info.item.image} style={styles.image} />
                        <Text>{info.item.value}</Text>
                       <View>
                        <View style={styles.button}>
                        <Button title="Confirm" color="blue" onPress={this.props.itemDelete}></Button>
                        </View>
                    </View>
                </TouchableOpacity>
            )}
        >
        </FlatList>
        );
     }
 }

const styles = StyleSheet.create({
listitems: {
    width: "100%",
    flex:1,
    marginTop: 5,
    backgroundColor: "lightgrey",
    padding: 10,
    flexDirection: 'row',
    justifyContent:'space-between`enter code here`'
},
image: {
    marginRight: 8,
    height: 30,
    alignItems: "center",
    width: 40,
},
button: {
    width: "40%",
    alignItems: 'flex-end',
}
 })