react 本机上的按钮文本始终为大写

Question

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

js prettyprint-override">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

来自官方文件

一个基本的按钮组件，应该在任何平台上呈现良好。支持最低级别的自定义。

推荐使用可触摸的不透明度或可触摸的本机反馈

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

下面我添加了textTransform：“小写”，作为按钮的样式规则，以覆盖任何继承的文本大小写。

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 2

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

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

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

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

成为

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

我和OP有同样的问题，这个解决了我的问题。

Answer 3

对于 react Native Paper 按钮，请使用 uppercase={false} prop：

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