如何使用 react-native-elements 将按钮的标题右对齐？

Question

我正在使用 react-native-elements 在我的应用程序中添加按钮，但我无法将按钮内的文本右对齐。

我尝试了 titleStyle 属性和 alignText:'right' 但没有成功

<Button title={'Hello World'} titleStyle={{ textAlign:'right' }} />

我希望按钮标题右对齐，但它只是居中。

Answer 1

将您自己的 Text 作为 children 传递给 Button 将解决您的问题。但是在 React-native 中，您不能将 Text 作为 children 调用到 Button 中。因为"The Title props of a Button must be a string".

所以您可以使用 TouchableOpacity.

而不是使用 Button

<TouchableOpacity onPress={() => {console.log('button press')}}>
   <Text style={{textAlign:'right'}}>Hello World</Text>
</TouchableOpacity>

或者您可以创建一个按钮组件。像这样。

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

const Button = ({ onPress, children }) => {
  const { buttonStyle, textStyle } = styles;
  return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
      <Text style={textStyle}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

export default Button;

const styles = {
  textStyle: {
    textAlign: 'right',
    color: '#336633',
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
  },
  buttonStyle: {
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#336633',
    paddingTop: 4,
    paddingBottom: 4,
    paddingRight: 25,
    paddingLeft: 25,
    marginTop: 10,
    marginLeft: 15,
    marginRight:15,
    width: 380
  }
};

Answer 2

您可以通过将 justifyContent 'flex-end' 添加到 React Native Elements Button buttonStyle 道具来轻松做到这一点

<Button
  title="My Button"
  type="clear"
  buttonStyle={{ justifyContent: 'flex-end' }}
/>

如何使用 react-native-elements 将按钮的标题右对齐？

How to align button's title to right using react-native-elements?

button

react-native

react-native-elements