Как сделать так, чтобы заголовок скользил при использовании createDrawerNavigator? - PullRequest
Новая
       61

Как сделать так, чтобы заголовок скользил при использовании createDrawerNavigator?

3 голосов
/ 24 сентября 2019

решено

Я нашел решение, как видно из ответа ниже.

Я пытался довольно многоразличные способы решения этой проблемы ..

Чтобы заголовок не находился над выдвижным ящиком, я вложил в DrawerNavigator навигаторы.При открытии заголовка (со свойством drawerType: 'slide') он перемещает все содержимое вложенного навигатора, но не сам заголовок.Заголовок сохраняет свое место, а содержимое ящика отображается под заголовком.

Есть ли способ сделать заголовок также скользящим, кроме того, что он отображается отдельно для каждого компонента во вложенном навигаторе?

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

Заранее спасибо!

РЕДАКТИРОВАТЬ:

В попытке воссоздать эту проблему (для того, чтобыпредоставив понятный фрагмент кода), я понял, что на самом деле я установил заголовок как часть Drawer Navigator.Я сделал это, чтобы иметь возможность использовать пользовательский заголовок, и каждая попытка установить заголовок во вложенных стеках приводила к тому, что он перезаписывался выдвижным ящиком.Либо, не появляясь, при предоставлении ящика header: null, либо когда вообще не предоставляете никакого заголовка, возвращая заголовок по умолчанию (пустой) вместо моего пользовательского.

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

1 Ответ

0 голосов
/ 25 сентября 2019

Я решил исправить свою проблему.По-видимому, мне нужно было поместить свой bottomTabNavigator в стекавигатор, который затем можно было бы поместить в DrawerNavigator.

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

Заголовок и экран (ы) 

const Header = () => <View style={{height: 50, width: '100%', backgroundColor: 'yellow'}}></View>

const Screen = ({color, navigation}) => {
  return (
    <View style={{flex: 1, backgroundColor: color}}>
      <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
        <View style={{backgroundColor: 'white', width: 50, height: 50}}></View> 
      </TouchableOpacity>
    </View>
  );
}

BottomTabNavigator и StackNavigator 

const Bottom = createBottomTabNavigator(
{
  ScreenOne: {
    screen: props => <Screen color='green' {...props} />
  },
  ScreenTwo: {
    screen: props => <Screen color='yellow' {...props} />
  }
},
{
  initialRouteName: 'ScreenOne',
  tabBarOptions: {
    activeTintColor: "blue",
    inactiveTintColor: "grey",
  },
  navigationOptions: {
    header: () => <Header />
  }
});

const Main = createStackNavigator(
{
  BottomTab: Bottom
});

DrawerNavigator и AppContainer 

const DrawerNavigator = createDrawerNavigator(
{
  MainFlow: {
    screen: Main,
    navigationOptions: {
      header: null
    }
  }  
},
{
  hideStatusBar: false,
  drawerType: 'slide',
  drawerBackgroundColor: 'rgba(255,255,255,.9)',
  overlayColor: 'rgba(0,0,0,0)',
  drawerLockMode: 'locked-open',
  contentOptions: {
    activeTintColor: '#fff',
    activeBackgroundColor: '#6b52ae',
  },
  navigationOptions: {
    header: null
  }
});

export const AppContainer = createAppContainer(DrawerNavigator);
...