react native 的按钮文本总是大写

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;

The visualization

Answer 1

对于 react Native Paper 按钮使用大写={false} 属性：

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

Answer 2

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

内置的 Button 组件似乎有时会出现一些奇怪的兼容性/可见性问题，其中之一就是将 title 属性文本全部大写。在 Chrome 中查看 Button 组件的 documentation 时，预览显示所有文本在“Web”视图下大写，但不是 Android 或 iOS（我在 Android 设备上使用 Expo 和 Metro Bundler 时遇到了这个问题，所以不确定该怎么做）。我在 Button 文档中找不到任何关于大写/大写的信息，所以这可能是一个错误。

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

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

变成

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

我遇到了和 OP 一样的问题，这解决了我的问题。

Answer 3

来自官方documentation

一个基本的按钮组件，应该可以在任何平台上很好地呈现。 支持最低程度的自定义。

推荐使用 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

Answer 4

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

你可以在official documentation看到这个

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

Answer 5

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