在 React Native 上更改按钮字体大小 [关闭]答案

【问题标题】：Change Button Font Size on React Native [closed]在 React Native 上更改按钮字体大小 [关闭]
【发布时间】：2018-10-08 12:10:41
【问题描述】：

我正在尝试更改我的 react 本机应用程序上的 Button 字体大小，但出现错误。有谁知道如何正确地做到这一点？谢谢。

【问题讨论】：

嗨！你得到什么错误？
请发布您的代码。
我想为导航按钮设置样式。我有零食的代码，这是链接：snack.expo.io/@indriruth/navigation
我尝试更改 ./components/Home.js 上 Button 的 fontSize 和 fontWeight。谢谢你们的回复，伙计们。

标签： reactjs react-native button react-navigation

【解决方案1】：

我感觉你没有在Touchable 中使用Text 元素：

import React from 'react';
import { TouchableWithoutFeedback, Text } from 'react-native';

export default function ComponentName() {
  return (
    <TouchableWithoutFeedback>
      <Text style={{ fontSize: 24 }}>Button Text</Text>
    </TouchableWithoutFeedback>
  );
}

【讨论】：

我认为我不能使用 Touchable 导航到下一页。我在上面发布了关于我的问题的链接和更多描述。请检查一下。

【解决方案2】：

不幸的是，根据文档 (https://reactnative.dev/docs/button)，您无法更改按钮的字体大小。您可以更改的唯一样式道具是color。

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

【讨论】：

【解决方案3】：

这是我使用TouchableOpacity 和Text 轻松设置按钮样式的解决方案：

import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from "react-native";

export default class CustomButton extends Component {
  render(){
    return (
      <View style={styles.container}>

        /* Custom Button */
        <TouchableOpacity
          style={styles.customBtnBG}
          onPress={() => {}} 
        >
          <Text style={styles.customBtnText}>Button</Text>
        </TouchableOpacity>

      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
        justifyContent: "center",
    alignItems: "center"
  },

  /* Here style the text of your button */
    customBtnText: {
        fontSize: 40,
        fontWeight: '400',
        color: "#fff",
    },

  /* Here style the background of your button */
    customBtnBG: {
    backgroundColor: "#007aff",
    paddingHorizontal: 30,
    paddingVertical: 5,
    borderRadius: 30
    }
});

【讨论】：

【解决方案4】：

您可以使用TouchableHighlight、TouchableOpacity、TouchableNativeFeedback 创建自定义按钮。

import {TouchableHighlight,TouchableOpacity,TouchableNativeFeedback }from 'react-native'

When to use TouchableNativeFeedback, TouchableHighlight or TouchableOpacity?

【讨论】：

【解决方案5】：

在 react native 中使用这个库 https://github.com/APSL/react-native-button 代替 Button 组件。

<View>
  <Button
    style={{
      backgroundColor: "#FE434C",
      borderColor: "transparent",
      borderRadius: 20,
      width: 250
    }}
    textStyle={{ color: "#FFFFFF", fontSize: 20 }}
  >
    Hello
  </Button>
</View>

【讨论】：

【解决方案6】：

您可以将 react-native-elements 与 titleStyle 道具一起使用。

import {Input, Button} from 'react-native-elements';

<Button
   onPress={this.addPicture}
   titleStyle={{
       color: "white",
       fontSize: 16,
   }}
   buttonStyle={{
       backgroundColor: "white",
       borderRadius: 60,
       flex: 1,
       height: 30,
       width: 30,  
   }}

   title="+"
/>

【讨论】：

哈哈哈我终于得到buttonStyle在谁知道搜索多久之后工作，然后我必须使用 separate 道具作为标题...谢谢