Question

我是React Native的新手，目前正在学习有关该技术的知识。我开始创建一个带有按钮的卡片布局。

这是我的布局：

   <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>

这是我的样式表：

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

    },
});

结果是：

我想使按钮变大，所以我在 buttonContainer 中添加了 width ，但是按钮的位置改为了屏幕左侧，并且其大小没有变化。

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

},

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

Answer 1

所以基本上alignSelf：'center'是问题所在。删除该工作。检查下面的博览会链接和代码：

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'

    },
});

展览链接：expo link

希望有帮助。毫无疑问

Answer 2

我通过：

解决了此问题

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

现在这是我的布局：

React Native：在中央屏幕上更改按钮大小

2 个答案: