时间戳

首页 > 解决方案 > 按钮样式在本机反应中不起作用

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

问题描述

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

这是我的看法

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,
  },
});

这是我的屏幕 在此处输入图像描述

有什么我想念的吗？

标签： react-nativebutton

解决方案

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

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

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

推荐阅读