React-Native Button样式不起作用

33 浏览
0 Comments

React-Native Button样式不起作用

导入

\n

import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';

\n这是我的React按钮代码，但样式没有起作用...\n

\n我也尝试了这段代码\n

\n

更新问题：

\n我还尝试了这种方式...\n

\n

样式

\n

const styles = StyleSheet.create({
    buttonStyle: {
        color: 'red',
        marginTop: 20,
        padding: 20,
        backgroundColor: 'green'
    }
});

\n但没有输出：\n我的手机截图：-\n\"我的手机截图：\"

0

3 答案

0 Comments

原因：React Native的按钮选项非常有限，无法直接通过样式来修改按钮的外观。

解决方法：可以使用TouchableHighlight或TouchableOpacity来包裹按钮，并通过样式来修改外观。另外，也可以使用react-native-button这个库来创建自定义的按钮。

代码示例：

使用react-native-button库需要先安装，可以通过以下链接获取更多信息：https://www.npmjs.com/package/react-native-button

感谢，这个解决方法有效！但是需要安装一个库来处理按钮，有点让人沮丧。

0
0 Comments

React-Native中的Button组件不支持直接设置样式属性，例如margin和padding。如果需要对Button进行样式设置，可以将Button放置在一个View组件中，并将样式属性应用到View上。

解决方法：

将Button组件放置在一个View组件中，然后将样式属性应用到View上。例如：

这样就可以通过设置View的样式来间接地对Button进行样式设置，包括尺寸、内边距、文本外观等。

0
0 Comments

React Native中的按钮（Button）非常有限，无法使用样式（style prop），也无法通过类似于网页中的方式设置文本。如果想要对按钮的外观有更多的控制，可以使用TouchableXXXX组件之一，比如TouchableOpacity。

TouchableOpacity非常容易使用，以下是一个使用TouchableOpacity的工作示例：

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
const CustomButton = () => {
  return (
    
      Click Me
    
  );
};
const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});
export default CustomButton;

关于Button组件为什么没有样式属性，可以从官方文档中找到答案。文档中提到，如果Button组件不符合您的需求，可以使用TouchableOpacity或TouchableNativeFeedback来构建自己的按钮。您可以查看Button组件的源代码来获得灵感，或者浏览社区中其他开发者构建的各种按钮组件。

希望对您有所帮助！

0