Как выровнять заголовок кнопки по праву, используя response-native-elements? - PullRequest
Новая
       22

Как выровнять заголовок кнопки по праву, используя response-native-elements?

0 голосов
/ 04 апреля 2019

Я использую реагирующие нативные элементы для добавления кнопки в свое приложение, но я не могу выровнять текст внутри кнопки вправо.

Я пробовал свойство titleStyle с alignText: 'right', но безуспешно 

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

Я хотел, чтобы заголовок кнопки выравнивался вправо, но он просто оставался в центре.

1 Ответ

2 голосов
/ 05 апреля 2019

Передача своих собственных Text детьми в Button решит ваши проблемы.Но в React-native вы не можете назвать Text детьми в Button.Потому что «Заголовок реквизита 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
  }
};
...