反应原生按钮的文本总是大写

Question

我在 react-native 创建了一个组件，但是按钮的文本总是大写，有人知道为什么它不接受传递的文本，因为我想显示“登录”，但它显示“登录”

import React, { Component } from 'react';
import { View, Button} from 'react-native';
import LabelApp from "../../config/labels.app";

const labelApp = LabelApp.loginView;

export default class Login extends Component {

  constructor(props){
    super(props);
    this.handleClickBtnEnter = this.makeLogin.bind(this);
  }

  makeLogin() {

  }

  render() {
    return (
     <View>
       <Button title= {labelApp.textButtonLogin} onPress={this.handleClickBtnEnter}/>
     </View>
    );
  }
}

组件标签

const LabelApp = {
    loginView: {
        textButtonLogin: 'Ingresar',
    },
}
export default LabelApp;

可视化

Answer 1

对于 React Native Paper 按钮，请使用 uppercase={false} 属性：

<Button
      mode="outlined"
      uppercase={false}
      accessibilityLabel="label for screen readers"
      style={styles.yourButtonStyle}>Button label</Button>

Answer 2

我已经尝试过您的代码，看起来这是Button组件的预期行为react-native

你可以在官方文档中看到这一点

我相信您需要更改Button组件，从另一个包中获取它来满足您的需求。

作为替代方案，您可以创建自己的按钮

import React, { Component } from 'react';
import { View, Button, TouchableHighlight, StyleSheet } from 'react-native';
import LabelApp from "../../config/labels.app";

const labelApp = LabelApp.loginView;

export default class Login extends Component {

  constructor(props){
    super(props);
    this.handleClickBtnEnter = this.makeLogin.bind(this);
  }

  makeLogin() {

  }

  render() {
    return (
     <View>
       <TouchableHighlight onPress={this.handleClickBtnEnter} underlayColor="white">
         <View style={styles.button}>
           <Text style={styles.buttonText}>{labelApp.textButtonLogin}</Text>
         </View>
       </TouchableHighlight>
     </View>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    textAlign: 'center',
    padding: 20,
    color: 'white'
  }
});