реагировать на заголовок навигации, завернутый

При использовании интерактивной навигации StackNavigator простой заголовок заголовка переносится. Как отобразить полное название? В приведенном ниже коде заголовок - это личная информация. Но название не отображается полностью на устройстве и симуляторе iPhone 5s.

Версии:

  1. "реагировать-навигация": "^ 1.0.0-beta.11"

  2. "react-native": "^ 0.47.2"

    static navigationOptions = {title: "Личная информация"};

введите здесь описание изображения


react-native react-native-ios react-navigation
person suman j    schedule 02.09.2017    source источник
comment
Вы можете установить ширину раздела заголовка с помощью headerTitleStyle, но это будет плохо выглядеть. Использование отрывка заголовка, предоставленного самой реактивной навигацией, является хорошей идеей.   -  person Manzoor Samad    schedule 10.11.2017

Ответы (2)


arrow_upward
12
arrow_downward

Разрешил это. Определение headerTitleStyle с шириной, соответствующей ширине устройства, решает эту проблему.

static navigationOptions = {
    title: "Personal Information",
    headerBackTitle : null,
    headerTitleStyle : {width : Dimensions.get('window').width}
};
person suman j    schedule 02.09.2017
comment
Хорошее решение. Спасибо - person Nabeel K; 23.01.2019

arrow_upward
0
arrow_downward

Если ваш заголовок изменяется динамически в зависимости от того, что вы передаете в route в качестве параметров, заголовок не будет усечен и будет переполнен. Чтобы этого избежать, вы можете сделать что-то вроде этого:

function truncate(str: string, n: number) {
  return str.length > n ? str.substr(0, n - 1) + '...' : str;
}

<YourStack.Screen
  name="MyScreen"
  component={MyScreen}
  options={({ route }) => ({
    title: truncate(route.params.yourObject.title, 15),
  })}
/>

truncate - простая функция, которая принимает число, сокращает введенную вами строку и добавляет ... после этого.

person Ben    schedule 18.11.2020