Reactjs 反应本机：更改中央屏幕中的按钮大小

我是新手，目前正在学习这项技术。 我开始创建一个带有按钮的卡片布局

这是我的布局：

   <KeyboardAvoidingView
        behavior='padding'
        keyboardVerticalOffset={50}
        style={styles.screen}>
        <LinearGradient
            colors={['#ffedff', '#ffe3ff']}
            style={styles.gradient}>
            <Card style={styles.card}>
                <ScrollView>

                    <View style={styles.buttonContainer}>
                        <Button
                            color={Colors.primary}
                            title='ورود'
                            onPress={() => { }} />
                    </View>


                </ScrollView>
            </Card>
        </LinearGradient>
    </KeyboardAvoidingView>

结果是：

我想使按钮变大，所以我在按钮容器中添加了宽度，但按钮改变了屏幕左侧的位置，其大小没有改变

buttonContainer: {
    width: '40%',
    alignItems: 'center',
    marginVertical: 30,

},

---

当按钮位于屏幕中央时，我如何更改按钮的宽度？

因此基本上是对齐的：“中心”是个问题。把它去掉是有效的。检查以下世博会链接和代码：

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    KeyboardAvoidingView,
    ScrollView,
    Button
} from 'react-native';


import { LinearGradient } from 'expo-linear-gradient'


import Card from './Card';



export default AuthScreen = () => {
    return (
        <KeyboardAvoidingView
            behavior='padding'
            keyboardVerticalOffset={50}
            style={styles.screen}>
            <LinearGradient
                colors={['#ffedff', '#ffe3ff']}
                style={styles.gradient}>
                <Card style={styles.card}>
                    <ScrollView>
                        {/* <View style={styles.wcContainer}>
                            <Text style={styles.headerText}>خوش آمدید</Text>
                        </View> */}

                        {/* <View style={styles.container}>
                            <Text style={styles.text}>نام کاربری</Text>
                            <TextInput style={styles.input} />
                            <Text style={styles.text}>رمز عبور</Text>
                            <TextInput style={styles.input} />
                        </View> */}
                        <View style={styles.buttonContainer}>
                            <Button
                                color= 'red'
                                title='ورود'
                                style={{marginHorizontal:200}}
                                onPress={() => { }} />
                        </View>


                    </ScrollView>
                </Card>
            </LinearGradient>
        </KeyboardAvoidingView>
    );
}

const styles = StyleSheet.create({
    screen: {
        flex: 1
    },
    gradient: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    card: {
        width: '90%',
        height: '80%',
        padding: 20
    },
    buttonContainer: {
        // marginHorizontal:200,
        width:'100%',
        // alignItems: 'center',
        // marginVertical: 30,
        justifyContent:'center'

    },
});

从“React”导入React；
进口{
样式表，
文本，
看法
文本输入，
键盘避免了gView，
滚动视图，
按钮
}从“反应本机”；
从“expo linear gradient”导入{LinearGradient}
从“./卡”导入卡；
导出默认AuthScreen=（）=>{
返回(
{/* 
خوش آمدید
*/}
{/* 
نام کاربری
رمز عبور
*/}
{ }} />
);
}
const styles=StyleSheet.create({
屏幕：{
弹性：1
},
坡度：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“中心”
},
卡片：{
宽度：“90%”，
身高：80%，
填充：20
},
按钮容器：{
//marginHorizontal:200，
宽度：'100%'，
//对齐项目：“居中”，
//时间:30,，
辩护内容：“中心”
},
});

世博链接：

---

希望能有帮助。无需怀疑

我通过以下方法解决了此问题：

buttonContainer: {
    width: '40%',
    alignSelf: 'center',
    marginVertical: 30,
}

现在这是我的布局：

---

您能否在expo零食中分享一个工作示例，以便我们检查并还原@GauravRoy

buttonContainer: {
    width: '40%',
    alignSelf: 'center',
    marginVertical: 30,
}