Какие стили мне нужно написать для элементов выравнивания (react-native)

Question

У меня есть компонент с TextInput и другой компонент, который называется CompanyAddress. У каждой компании может быть много адресов, поэтому у меня должна быть кнопка «плюс».

Есть стили контейнеров

const AppStyles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#ffffff",
        alignItems: "center",
        justifyContent: "center"
    },
    inputStyle: {
        height: 40,
        width: '80%',
        borderColor: '#28c9d9',
        textAlign: 'center',
        borderWidth: 1,
        marginBottom: 20,
        fontSize: 16
    }
});

есть основной компонент

    <KeyboardAvoidingView behavior="padding" style={AppStyles.container}>
        <TextInput
            autoCompleteType="name"
            placeholder="organization"
            maxLength={30}
            style={AppStyles.inputStyle}
            onChangeText={(text) => { this.setState({name: text})} }
        />
        <CompanyAddress/>
    </KeyboardAvoidingView>

и есть CompanyAddress

class CompanyAddress extends React.Component<any, any> {
    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    autoCompleteType="name"
                    placeholder="address"
                    maxLength={30}
                    style={[AppStyles.inputStyle, styles.textInput]}
                />
                <AntDesign style={styles.plus} name="plus" size={24} color="black" />
            </View>
        );
    }
}

const styles = StyleSheet.create({
   container: {
       width: '100%',
       flexDirection: 'row'
   },
   textInput: {
       width: '70%',
   },
   plus: {
       width: '30%'
   }
});

, но мой CompanyAddress теперь выглядит так

, но я хочу изменить стили для достижения этого

Answer 1

вы можете добавить justifyContent: center в контейнер, а для дочерних элементов alignSelf: Center ex:

<View style={{justifyContent : center,flexDirection:row}}> <View style={{alignSelf:Center}}><View> <View style={{alignSelf:Center}}><View> </View>