web-dev-qa-db-ja.com

React Nativeでボタンのフォントサイズを変更

反応するネイティブアプリでボタンのフォントサイズを変更しようとしていますが、エラーが発生しました。誰かがそれを適切に行う方法を知っていますか？ありがとうございました。

reactjsreact-nativebuttonreact-navigation
7
webprogramming13

Text内でTouchable要素を使用していないと感じています。

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

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

残念ながら、ドキュメントによると（ https://facebook.github.io/react-native/docs/button.html ）、ボタンのフォントサイズを変更することはできません。変更できるスタイルの小道具は「色」のみです。

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

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
    }
});
1
JulienRioux

TouchableHighlight、TouchableOpacity、TouchableNativeFeedbackを使用してカスタムボタンを作成できます。

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

TouchableNativeFeedback、TouchableHighlight、またはTouchableOpacityを使用する場合

0
dbvt10

このライブラリを使用してください 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>
0
SDushan

titleStyle propsでreact-native-elementsを使用できます。

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="+"
/>
0
loic queruel