Выравнивание кнопки в 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

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',
}
 })

Answer 2

Вы можете использовать flex-end, flex-start, center для горизонтального выравнивания предметов.Вы должны добавить flex direction :'row' в родительский компонент

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

Answer 3

Просто добавьте justifyContent: 'space -ween', alignItems: 'center' к styles.listitems. Это решит вашу проблему.

Answer 4

Думаю, лучше.

    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',
}
 })