React Native中按钮的文本始终是大写的

Question

我在React Native中创建了一个组件，但按钮的文本始终是大写字母。有人知道为什么它没有采用传递的文本吗？因为我想显示“登录”，但它显示为“LOGIN”。

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;

这个可视化

- Alejandro Gonzalez

---

我也遇到了同样的问题，正在尝试找出为什么React Native不能按原样显示文本。在Android中，为什么按钮标题全是大写字母？ - A. Abdelmonsef

Answer 1

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

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

- Yoyis

Answer 2

因此，其他两个答案都是正确的，你应该使用TouchableOpacity，但作为一个新手来说，我花了一段时间才明白这里发生了什么。希望这个解释提供了更多的背景信息。

内置的Button组件似乎在某些情况下存在一些奇怪的兼容性/可见性问题，其中之一是将title属性文本呈现为全大写。在Chrome中查看Button组件的文档时，在“Web”视图下预览显示所有文本都被大写，但在Android或iOS上没有（我在使用Expo和Metro Bundler时遇到了这个问题，在Android设备上，所以不确定这个问题的原因）。我在Button文档中找不到任何关于大写的信息，所以也许这是一个bug。

解决方案是使用一个不同的组件，称为TouchableOpacity。 它也有一个可以使用的onPress事件和内置的触摸动画，但它比Button组件具有更少的开箱即用的样式。从文档中重要的是注意到：“透明度由将子项包装在Animated.View中控制，该视图添加到视图层次结构中。请注意，这可能会影响布局。” 它没有title属性，因此您只需将按钮文本放在Text组件中，如下所示：

<Button 
  title='text will be capitalized' 
  onPress={onPress}
/>

变成

<TouchableOpacity onPress={onPress}>
  <Text>text will stay lowercase</Text>
</TouchableOpacity>

我和 OP 遇到了同样的问题，这个解决方案对我有用。

- huntzinger92

Answer 3

从官方文档得知：

一个基本的按钮组件，可以在任何平台上呈现出漂亮的效果。 支持最小程度的自定义。

建议使用Touchable Opacity或者Touchable Native Feedback来实现触摸功能。

https://facebook.github.io/react-native/docs/touchableopacity

下面我添加了textTransform: 'lowercase',作为样式规则，以覆盖所有继承的文本大小写。

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

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  onPress = () => {
    this.setState({
      count: this.state.count+1
    })
  }

 render() {
   return (
     <View style={styles.container}>
       <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
       >
         <Text> Touch Here </Text>
       </TouchableOpacity>
       <View style={[styles.countContainer]}>
         <Text style={[styles.countText]}>
            { this.state.count !== 0 ? this.state.count: null}
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    textTransform: 'lowercase', // Notice this updates the default style
  },
  countContainer: {
    alignItems: 'center',
    padding: 10
  },
  countText: {
    color: '#FF00FF'
  }
})

https://snack.expo.io/Bko_W_gx8

- Drew Reese

---

谢谢，我将使用TouchableOpacity。 - Alejandro Gonzalez

Answer 4

这个问题已经有3年的历史，我不确定为什么直到现在还没有人正确回答。

从Android Lollipop开始，默认情况下原生Android按钮是全大写的，React Native在你的应用中使用react-native控件时也是如此。要覆盖这个功能，你只需要在你的styles.xml文件中的应用主题内添加这一行代码（不是启动画面样式）。

<item name="android:textAllCaps">false</item>

你可以在这里获取更多细节：https://dev59.com/nV8d5IYBdhLWcg3wVQ0U#30464346

显然，由于更改是在本地 XML 文件而不是 JavaScript 文件中进行的，所以更改不会立即生效。因此，你需要运行 npm/yarn run android。

- Saamer

Answer 5

我已经尝试了你的代码，看起来这是使用 react-native 的 Button 组件的预期行为。

你可以在官方文档中查看。

我认为你需要改变 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'
  }
});

- Hurobaki

---

你确定吗？当我使用按钮时，无法更改文本。 - Alejandro Gonzalez

我已经编辑了我的答案，为您提供了一个解决方法，请告诉我它是否适用于您。 - Hurobaki

谢谢，我明白为什么需要更改元素了。这很有用。 - Alejandro Gonzalez

Answer 6

            <Button
                style={{
                  borderRadius: 10,
                  backgroundColor: "#000",
                  width: 200,
                  height: 50,
                }}
              >
                <Text
                 uppercase={false} 
                >
                  Login
                </Text>
              </Button>

- Rutuja Kherde

---

你描述得没错，但是给出的代码示例有误，textTransform: 'none'，在所有按钮上都应该移除大写样式。 - Furquan