Я работаю над сложным приложением React Native, которое использует библиотеку реагирования-навигации.Архитектура навигации выглядит примерно так:
- Переключение навигатора
- Стек аутентификации (вход, регистрация, забытый пароль и т. Д.)
- Стек с проверкой подлинности
- bottomTabNavigator
- 3 страницы, одна из которых является другим навигатором коммутатора (который здесь находится в фокусе)
- В этом навигаторе коммутатора (назовите его Report) есть несколько маршрутов, один из которых является новымНавигатор стека (назовите его Rulings)
Переключатель «Отчет» заключен в контейнер, в котором все экраны для этогоlevel have.
Вот небольшой пример кода того, как они написаны:
const AppNavigator = createSwitchNavigator({
Authentication: createStackNavigator({
Login,
Register
// etc
}),
Authenticated: createStackNavigator({
Main: {
screen: createBottomTabNavigator({
tab1,
tab2,
Report: ReportContainer
})
// other screens outside of the tab navigator but still at the top level
})
const ReportNavigator = createSwitchNavigator({
page1,
page2,
Rulings: createStackNavigator({
RulingsHome: <Text>Rulings Home</Text>,
// other screens
})
const ReportContainer = ({ navigation }) => (
<ScrollView>
// other stylistic stuff
<ReportNavigator navigation={navigation} />
</ScrollView>
)
Извинения, если я допустил ошибки, это всего лишь пример.
Таким образом, навигатор отчетов отлично работает для всех остальных экранов.Содержимое упаковки вокруг <ReportNavigator> работает отлично, и содержимое работает.Однако для Rulings ничего из навигатора не отображается.Показана только основная обёртка от ReportContainer.Однако, когда я использую React devtools, я вижу, что содержимое отображается, но оно не видно.Кроме того, если я удаляю <ScrollView> в ReportContainer и просто использую <ReportNavigator navigation={navigation} />, он показывает содержание для Правил.
При переключении ScrollView for View возникает та же проблема, но если я переключаюсь на <React.Fragment>, он работает, упаковывая содержимое и все.Но, очевидно, поскольку это больше не ScrollView, содержимое не прокручивается.Мне нужно, чтобы содержимое и оболочку можно было прокручивать.
Если я добавлю некоторый код над компонентом Навигатора, например:
const ReportContainer = ({ navigation }) => (
<ScrollView>
// other stylistic stuff
<Text>Hello, world!</Text>
<ReportNavigator navigation={navigation} />
</ScrollView>
)
Текст отображается, но ничего из навигатора не отображается.видимый.Глядя на инспектора, они оба являются потомками <ScrollView>, как и должно быть.
Таким образом, проблема в том, что <ScrollView><ReportSwitchNavigator /></ScrollView> (или <View>), похоже, испортил глубоко вложенный стековый навигатор внутриродительский переключатель навигатор.Что я могу сделать, чтобы обойти это?Это ожидаемое поведение, или я должен сделать пример на Закусках и подчиниться проблемам реагирующей навигации?