Кастомизация заголовка экрана (react native)

Question

Есть компонент для хэдера экрана мобильного устройства

function CustomTitle(props) {
  return (
    <View style={{ flexDirection: "row", alignItems:"space-between"}}>
      <Text style={{flex:1}}>{props.name}</Text>
      <Text style={{flex:3}}>{props.number}</Text>
    </View>
  );
}

Здесь функция для вставки в заголовок значения, который прилетает из переменной route

const [title, setTitle] = useState(route.params.name);
const [titleNumber, steTitleNumber] = useState(route.params.number);

React.useLayoutEffect(() => {
  navigation.setOptions({
    title:
      title === "" ? (
        "No title"
      ) : (
        <CustomTitle name={title} number={titleNumber} />
      ),
  });
}, [navigation, title]);

Вопрос заключается в банальной верстке. Как Text блок, который содержит name оставить по середине хэдера, а второй текстовый блок с number прижать к правому краю. В данный момент оба элемента распологаются по центру и общий стиль alignItems не отрабатывает

Так это выглядит, а я хочу, чтобы все после решетки ушло в правый край

Answer 1

Решение. Вот здесь нашел использование setOptions с параметром headerRight для добавления кнопки. И вот здесь можно найти описание функции. Если туда помещается кнопка, значит уж текст точно влезет. Пробуем:

React.useLayoutEffect(() => {
  navigation.setOptions({
    headerRight:()=>(
        <CustomTitle number={titleNumber} />
      ),
      title: title
  });
}, [navigation, title, titleNumber]);

Теперь title ставится на прямую в title, а в правую сторону только значения number.

Элемент, который улетает вправо реализован так:

function CustomTitle(props) {
  return (
      <Text style={{ color:colors.white, marginEnd:10}}>{props.number}</Text>
  );
}

Результат

БЛОГ НА HUSL

Кастомизация заголовка экрана (react native)

Ответы (1 шт):