按钮样式在本机反应中不起作用

Question

我想更改按钮的边框半径、颜色和填充，但它不起作用

这是我的看法

import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, View, Image} from 'react-native';
import {NavigationContainer}  from '@react-navigation/native';
import {createStackNavigator}  from '@react-navigation/stack';

function HomeScreen({navigation}) {
  return(
    <View
    style={styles.container}>
      <Text>Home Screen</Text>
      <Button 
        style={styles.button}
        title= "Go To Details"
        onPress={()=> navigation.navigate('Details')}
      />
    </View>
  )
}

这是我的风格

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    width: 200,
    marginTop: 20,
    backgroundColor: "green",
    padding: 15,
    borderRadius: 50,
  },
});

这是我的屏幕

有什么我想念的吗？

Answer 1

我不认为您可以使用本机按钮进行自定义。但您可以更改标题、颜色等内容。查看他们的文档 https://reactnative.dev/docs/button

更好的方法是使用自定义样式制作自己的按钮，如下所示：

<TouchableOpacity onPress={()=> navigation.navigate('Details')}>
  <View style={styles.button}>
   <Text>Go To Details</Text>
  </View>
</TouchableOpacity>

Answer 2

我建议您使用 View，因为来自“react-native”的按钮具有一些默认样式，并且可能难以覆盖它们，您可以像任何您想要的那样自定义 View。只需有一个视图并为他们提供所需的样式。

function HomeScreen({navigation}) {
  return(
    <View
    style={styles.container}>
      <Text>Home Screen</Text>
      <View 
        style={styles.button}
        title= "Go To Details"
        onPress={()=> navigation.navigate('Details')}
      />
    </View>
  )
}

只给你想要的样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    width: 200,
    marginTop: 20,
    backgroundColor: "green",
    padding: 15,
    borderRadius: 50,
  },
});