Выравнивание кнопки в React Native

Question

Выравнивание кнопки в React Native

В регулярном выражении, основанном на java, вы можете использовать [\s\S]

0

react-native react-native-android

задан Rahul Syal 3 March 2019 в 10:37

4 ответа

Другие вопросы по тегам:

react-native react-native-android

Похожие вопросы:

score 0 · Answer 1

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

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

score 0 · Answer 2

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

0

ответ дан shruti garg 3 March 2019 в 10:37

score 0 · Answer 3

Это лучше, я думаю.

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

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