Отобразить собственный значок выравнивания по левому краю и центрировать текст - PullRequest
Новая
       76

Отобразить собственный значок выравнивания по левому краю и центрировать текст

0 голосов
/ 22 мая 2018

Я новичок в React Native и пытаюсь сделать что-то очень простое:

Я хочу создать следующий компонент:

A TouchableHighlight у которого изображение выровнено по левому краю и текст центрирован относительно Touchable.

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

Вот что яполучили так далеко: 

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.appContainer}>
        <TouchableHighlight onPress={() => {}} style={styles.button}>
          <View style={styles.btnContainer}>
            <Image source={require('./assets/ic_logout.png')} style={styles.icon} />
            <Text style={styles.btnText}>Log out</Text>
          </View>
        </TouchableHighlight>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
    backgroundColor: 'lightgreen',
    alignItems: 'center',
    justifyContent: 'center'
  },
  btnContainer: {
    backgroundColor: '#1d2aba',
    paddingHorizontal: 60,
    paddingVertical: 10,
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 5
  },
  button: {
    borderRadius: 5
  },
  icon: {
    transform: [{ rotate: '180deg'}],
    width: 25,
    height: 25
  },
  btnText: {
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 16,
    color: 'white'
  }
});

export default App;


Для наглядности:

React Native

Вот Snack для ваших тестовых желаний!
PS: Уже пробовал это , но безрезультатно.

1 Ответ

0 голосов
/ 22 мая 2018

Вот вам решение.Обновите следующий стиль:

Для значка: 

icon: {
    transform: [{ rotate: '180deg'}],
    width: 25,
    height: 25,
    position: 'absolute',
    left: 2, // Keep some space between your left border and Image
  },

Для текста: 

 btnText: {
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 16,
    color: 'white',
    height:'100%',
    width:'100%'
  }

Вы можете обновитьоба стиля в вашем коде и проверить.

...