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

Question

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

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

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

我希望按钮标题向右对齐，但它只是停留在中心。

Answer 1

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

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

Answer 2

把你自己Text的孩子传进去Button可以解决你的问题。但是在 React-native 中，你不能将 aText作为孩子调用到Button. 因为“a 的 Title 道具Button必须是字符串”。

因此，Button您可以使用TouchableOpacity.

<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
  }
};