React Native: React Navigation - использовать один и тот же компонент заголовка на каждом экране? - PullRequest
Новая
       9

React Native: React Navigation - использовать один и тот же компонент заголовка на каждом экране?

0 голосов
/ 02 июля 2019

Итак, я пытаюсь использовать React Navigation и хочу использовать один и тот же компонент Header на всех своих экранах.

Я использовал expo-cli для создания проекта.

В моем файле MainTabNavigator.js у меня есть HomeStack и SettingsStack, и они выглядят так: 

const config = Platform.select({
  web: { headerMode: "screen" },
  default: {}
});

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen
  },
  config
);

HomeStack.navigationOptions = {
  tabBarIcon: ({ focused }) => (
    <NavButton
      focused={focused}
      name={focused ? "star" : "create"}
      label={focused ? "Save" : "New"}
    />
  )
};

HomeStack.path = "";

В нижней части файла у меня есть tabNavigator

const tabNavigator = createBottomTabNavigator(
  {
    HomeStack,
    SettingsStack
  },
  {
    tabBarOptions: {
      inactiveTintColor: "#fff",
      labelStyle: {
        fontSize: 14
      },
      showLabel: false,
      style: {
        backgroundColor: "#fff",
        borderTopColor: "#fff",
        height: 70,
        paddingBottom: 10,
        paddingTop: 10
      }
    }
  }
);

tabNavigator.path = "";

export default tabNavigator;

Я попытался добавить компонент <Header /> в navigatorOptions и defaultNavigationOption выше tabBarOptions в функции createBottomTabNavigator.

Аналогично этому: 

...
  {
    navigationOptions: {
      header: <Header />
    },
    tabBarOptions: {
      inactiveTintColor: "#fff",
      labelStyle: {
        fontSize: 14
      },
 ...

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

У меня сейчас есть нужные функции, но я должен зайти в каждый Screen файл и добавить: 

HomeScreen.navigationOptions = {
  header: <Header />
};

В настоящее время используется "react-navigation": "^3.11.0"

Любая помощь приветствуется!

Ответы [ 3 ]

0 голосов
/ 02 июля 2019

Установите ваш StackNavigator в качестве родителя вашего BottomTabNavigator, делая это, чтобы у вас был один заголовок для всех bottomTabs.Если вы используете этот подход и по какой-то причине вам нужен заголовок backButton, вы должны вручную изменить его. 

const bottomTabNavigator = createBottomTabNavigator(bottomRoutesConfig, bottomNavigatorConfigs)

createStackNavigator:({ tabNavigator : bottomTabNavigator },{ defaultNavigationOptions :{ header : <Header/> }})

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

0 голосов
/ 02 июля 2019

Вот как я этого добиваюсь.Создайте компонент CustomHeader следующим образом: 

const MyHeader = (navigation) => {
return {
    header: props => <Header {...props} />,
    headerStyle: { backgroundColor: '#fff' },
    headerTintColor: '#000',
};
}

Затем включите его в defaultNavigationOptions в навигаторе стека 

const AppNavigator = createStackNavigator(
{
    Launch: {
        screen: LaunchComponent,
    }
},
{
    initialRouteName: "Launch",
    defaultNavigationOptions: ({ navigation }) => {
        return MyHeader(navigation)
    }
}
)
0 голосов
/ 02 июля 2019

установите header на null на каждом экране и загрузите свой компонент на каждом экране 

class HomeScreen extends Component {
    static navigationOptions = {
        header: null,
    };

    render(){
    return(
      <View style={{flex:1}}>
          <Header />
      </View>
     )
   }
}

, поэтому по умолчанию header из react-navigation будет null, и вы можете загрузитьваш пользовательский компонент в качестве заголовка

ИЛИ 

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    headerTitle: <Header />,
  };

  /* render function, etc */
}

используйте headerTitle вместо title для загрузки вашего пользовательского компонента

...