React Native：无法更改按钮样式

Question

我正在尝试更改 React Native 中按钮的样式，但按钮颜色、边距、轮廓等的编辑根本不起作用。这里是the pic。下面是我的HomeScreen.js代码

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

function HomeScreen({ navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Image
                source={require('../image/success.png')}
                style={{
                    width: '50%',
                    height: 100,
                    resizeMode: 'contain',
                    marginTop: 0,
                }}
            />
            <Text style={{
                fontSize: 20,
                textAlign: 'center',
                marginLeft: 35,
                marginRight: 35,
                marginTop: 0,
                marginBottom: 10,
                color: '#00a3cc'
            }}>
            {'\n\n'}
            This is the Home Screen
            </Text>
            <Button
            style={styles.buttonStyle}
            onPress={() => navigation.navigate('Settings')}
            title="Go to Settings"
            />
        </View>
    );
};

export default HomeScreen;

const styles = StyleSheet.create ({
    buttonStyle: {
        backgroundColor: '#7DE24E',
        borderWidth: 0,
        color: '#FFFFFF',
        borderColor: '#7DE24E',
        height: 40,
        alignItems: 'center',
        borderRadius: 30,
        marginLeft: 35,
        marginRight: 35,
        marginTop: 20,
        marginBottom: 25,
    }
});

我们将不胜感激，如果需要更多信息，请告诉我。提前致谢。

Answer 1

您应该改用TouchableOpacity。

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

function HomeScreen({ navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Image
                source={require('../image/success.png')}
                style={{
                    width: '50%',
                    height: 100,
                    resizeMode: 'contain',
                    marginTop: 0,
                }}
            />
            <Text style={{
                fontSize: 20,
                textAlign: 'center',
                marginLeft: 35,
                marginRight: 35,
                marginTop: 0,
                marginBottom: 10,
                color: '#00a3cc'
            }}>
            {'\n\n'}
            This is the Home Screen
            </Text>
            <TouchableOpacity 
               onPress={() => navigation.navigate('Settings')}
               style={styles.buttonStyle}
            >
              <Text style={styles.btnText}>Go to Settings</Text>
            </TouchableOpacity>
        </View>
    );
};

export default HomeScreen;

const styles = StyleSheet.create ({
    btnText: {
       color: '#FFFFFF',
       fontSize: 18,
       textAlign: 'center',
    },
    buttonStyle: {
        backgroundColor: '#7DE24E',
        height: 40,
        alignItems: 'center',
        borderRadius: 30,
        marginLeft: 35,
        marginRight: 35,
        marginTop: 20,
        marginBottom: 25,
    }
});