Мы сталкиваемся с очень странным сценарием с реактивной навигацией в нашем приложении React Native, который наблюдается только на Android (как в эмуляторе, так и на физических устройствах А ТАКЖЕ для отладочных сборок, а также для сборок выпуска), но он отлично работает на iOS.
У нас есть существующее собственное приложение, и мы решили реализовать несколько новых экранов в React Native в качестве эксперимента, чтобы увидеть, пойдет ли оно на пользу нашему жизненному циклу разработки.
В нашем собственном приложении есть меню на боковой панели, и мы добавили новый пункт меню, который при выборе переводит пользователя в раздел React Native. Конечно, они могут вернуться в любое время, когда захотят, а затем вернуться в ту часть React Native.
Мы определили, что это связано с библиотекой реакции-навигации, но мы не знаем, что мы делаем не так.
Когда приложение загружается впервые, пользователь может выбрать новый пункт меню, и приложение React Native загрузится нормально, показывая свою начальную страницу маршрута и при этом StackNavigator работает нормально.
Если пользователь возвращается к исходной части (либо с помощью клавиши возврата, либо путем выбора другого параметра в меню боковой панели), а затем решает вернуться к части React Native, то часть StackNavigator не отображается. Отображаются другие компоненты React вне StackNavigator. Мы знаем, что он монтирует содержащиеся в нем компоненты, поскольку некоторые из них выполняют вызовы API, и мы видим, что эти конечные точки запрашиваются. Это просто не отображается.
Перезагрузка в эмуляторе снова будет правильно отображать приложение, пока мы не выйдем из React Native и не вернемся.
Довольно странно: Если мы включим удаленную отладку JS, вдруг все заработает нормально.
Может ли кто-нибудь заметить, что нам может не хватать в том, как мы используем StackNavigator, что мешает ему правильно отрисовываться? Опять же: он отлично работает, когда включен отладчик JS, что заставляет нас думать, что это не логический элемент, а, возможно, условие синхронизации или какая-то тонкая конфигурация? Или мы должны просто отказаться от реакции-навигации и перейти в другую библиотеку навигации?
Наш package.json:
{
"dependencies": {
"react": "16.0.0",
"react-native": "0.50.4",
"react-navigation": "1.5.2"
}
}
Наша страница входа в React Native (index.js):
import * as React from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import TestPage from './TestPage';
AppRegistry.registerComponent('MyApp', () => MyApp);
class MyApp extends React.Component {
public render() {
return (
<View style = {{flex:1}}>
<Text>'This text always shows up fine on Android, even on reentry to React application'</Text>
<AccountNavigator />
</View>
);
}
}
const AccountNavigator = StackNavigator(
{
FirstPage: {
screen: TestPage,
navigationOptions: ({ navigation }) => ({
title: 'Test View'
})
},
{
initialRouteName: 'FirstPage'
}
);
Простая тестовая страница (TestPage.js) просто:
import * as React from 'react';
import { Text, View } from 'react-native';
export default class TestPage extends React.Component {
render() {
return (
<View style = {{flex:1, alignItems: 'center', justifyContent: 'center'}}>
<Text>'If you can read this, then the app is on first load. But return to the native portion and then try to come back to React Native and you will not see me.'</Text>
</View>
);
}
}
@HedShafran Спасибо за предложение о реагировать на родную навигацию. Я думал об этой библиотеке, поэтому взглянул на нее вчера вечером. Однако из того, что я вижу, он предназначен исключительно для iOS и в первую очередь для использования навигации с вкладками iOS, и документация по настройке, похоже, также поддерживает эту идею. В моем конкретном случае наша проблема связана с Android, и нам нужна не навигация с вкладками, а навигация по многослойным экранам, когда пользователь заполняет формы.
Оказывается, это была проблема с настройкой макета. В нашем собственном коде в XML макета React Activity у нас были:
<com.facebook.react.ReactRootView
android:id = "@+id/ReactRootView
android:layout_width = "match_parent"
android:layout_height = "wrap_content" />
и проблема заключалась в "wrap_content" для высоты, из-за которой он отображал StackNavigator() с высотой в 1 пиксель. Понятия не имею, почему это всегда происходило только при повторном входе, а не в первый раз, и почему отладчик JS заставлял проблему исчезать.
Изменение layout_height на match_parent полностью решило проблему.
Это действительно похоже на состояние гонки из того, что вы описываете. Но мне нужно увидеть больше кода (некоторый родной код, связанный с этим ..), чтобы попытаться указать причину проблемы. Несмотря на это, вы можете попробовать эту библиотеку: github.com/wix/react-native-navigation