Question

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

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

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

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

Answer 1

您可以通过在React Native Elements Button buttonStyle道具中添加justifyContent'flex-end'来轻松实现此目的

select 
  FORMATMESSAGE('CREATE SYNONYM %s FOR db1.%s.%s;',  -- here goes template
                 QUOTENAME(a.name),
                 QUOTENAME(SCHEMA_NAME(b.[schema_id])),
                 QUOTENAME(a.name)
                ) AS query_to_run
from sys.tables a
inner join sys.schemas b
     on a.schema_id = b.schema_id
where a.type = 'U';

Answer 2

将自己的Text作为孩子带入Button将解决您的问题。但是在React-native中，您不能将Text称为子级Button。因为“ Button的Title道具必须是字符串”。

因此，可以使用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
  }
};

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

2 个答案: