Проблемы передачи RN встречаются H5

Я использую этот плагин поворот: реагировать-нативную-сеть, первый в ссылке распределения WebPack к проекту подмостям генерируемых (порожденным этим гп проекта там конфигурация WebPack, строительные леса это реагирует родной-веб-кли), в при настройке Webpack я столкнулся много проблем, но и узнал много вещей, вот основные проблемы, с которыми сталкиваются и решение h5 очередь.

1 столпотворение Конфигурация: Потому что это выходец из проекта, в node_modules мешок грамматического числе ц быть дано Бабель решена, в результате чего времени местных своих проектов, составленных не по ошибке, а позже нашел новое столпотворение интегрировало TS-погрузчик, в распределению времени нужно добавить плагин (подключаемые модули должны быть установлены):

плагины: [
                 « @ столпотворение / плагин-предложение по умолчанию, из-экспорта » ,   // время компиляции не может Fault экспорта 
                « @ столпотворение / Plugin-Трансформирование-Flow-Strip-типы »   // не поддерживает ключевое слово типа во время компиляции ошибка 
]

2 Проблема маршрутизации: Запуск реагировать-navagation используйте этот плагин более информации в Интернете, с очень широким, но после поворота H5 найденного из одной страницы, чтобы перейти к следующей странице, когда страница только до установленной непрозрачности 0, высота и нет края, что приводит к появлению пустой страницы и следующей странице сверху вниз, прокрутите страницу вниз, чтобы увидеть необходимость отслеживать маршруты в и, чтобы дать ему набор стиль:

  componentDidMount () {
              это .props.navigation.addListener ( ' willBlur ' , () => {
                  этот .setState ({контейнер: ' containerOut ' }) 
             }); 
             это .props.navigation.addListener ( ' willFocus ' , () => {
                  этот .setState ({контейнер: ' containerIn ' }) 
             }); 
    }

Поскольку каждая страница имеет обивку-топ (в противном случае будет скрыта верхней панелью навигации), так что каждый ввод новой страницы будет накладываться обивка-топ, поэтому установить стиль для каждой страницы отличается, то рассмотрит попробуйте другой плагин, и попробовал много (среагировать-нативный-маршрутизатор-потока, реагировать-маршрутизатор-нативный реагировать-родную-навигацию, реагируют-родной-навигатор-маршрутизатор), и, наконец, с среагировать нативный-маршрутизатор-потоком, чем больше людей, которые используют онлайн-информацию будет больше (в основном официальная документация API пересчитываются ...) говорят, чтобы увидеть пакет в реакцию-navagation основе, главным образом, чтобы решить некоторые из проблем среагировать-navagation и простота использования хорошо, учитывая, что он может решить проблему на вершине, а затем загрузить демо-версию и обнаружили h5 очередь, что вопрос на самом деле не существует, он стал превращаться в нашем проекте. Начиная с версии 3.37.0, после трансфекции h5 обнаружили Navbar не может быть достигнуто с конфигурацией, вы должны написать собственные компоненты, страница скачка не может быть найден Actions.push () метод после написания компонента, но в Интернете можно сказать, что это, но позже выяснилось 3.37 +0,0 версии еще этот метод, этот метод изменился после того, как 4.0.0, но черно-белые страницы, поворот не нашло h5 крайней высоты DIV, в конфигурации тегов маршрутизатора не так, чтобы, наконец, этикетки маршрутизатора вне крышки со слоем View, чтобы выйти из высоты страницы, ниже настроенный код маршрутизации:

        <Посмотреть стиль = {styles.wrap}> // здесь на высоту высоты аппарата получается 
          <Router sceneStyle styles.sceneStyle = {}> 
            <Scene Key = " корень " NavBar NavBar = {}> // каждая страница являются NavBar, объединены конфигурации , где 
              <Сцена Ключ = " C " 
                компонент = {C} , опорный компонент с в 
                заголовке = "1 " // навигации набора заголовков 
                righttitle = "1 " // навигации правой части заголовка 
                rightJumpTo = " A " / / правая часть названия навигации маршрута для перехода 
              /> 
              <Сцена 
                ключ= " " 
                Компонент = {а} 
                название = " 1 " 
                rightTitle = " 1 " 
                rightJumpTo = " ш " 
              /> 
              < Сцена 
                ключ = " ш " 
                компонент = {ш} 
                название = " 1 " 
              /> 
            </ Сцена> 
          < / Router>
        </ View>

Ниже компоненты NavBar:

импорта React, {Компонент} от  ' реагируют ' ; 
импорт { 
    TouchableOpacity, 
    вид, 
    изображение, 
    оповещение, 
    NativeModules, 
    StyleSheet, 
    текст 
} из  ' реагировать родную ' ; 
импорта {действия} от  « среагировать-нативный-маршрутизатор-потока » ; 

экспорт по умолчанию  класса NavBackButton расширяет компонент { 
    конструктор (реквизит) { 
        супера (реквизит) 
    } 
    Render () { 
        пусть {название, rightTitle = '', RightJumpTo = '' } = это .props; 

        Возвращение (
             <Посмотреть стиль = {styles.container}> 
                <TouchableOpacity onPress = {() => {Actions.pop ()}}> 
                    <источник = {требуется (Изображение ' ../images/rn_icon_nav_return.png ' )} стиль = {styles.back} /> 
                </ TouchableOpacity> 
                <стиль текста = {styles.txt}> {название} </ Text> 
                <TouchableOpacity onPress = {() => {Actions.push (rightJumpTo)}}> 
                    <Текст стиль = {styles.txt}> {rightTitle} </ Text> 
                </ TouchableOpacity> 
            </ View> 
        ); 
    }
} 
            
Const StyleSheet.create ({ 
    Контейнер: { 
        высота: 64 , 
        ширина: ' 100% ' , 
        BackgroundColor: ' # 5aa5ff ' , 
        верх: 0 , 
        позиция: ' абсолютным ' , 
        flexDirection: ' строка ' , 
        alignItems: ' центр ' , 
        justifyContent: ' пространство-между ' , 
        paddingHorizontal: 10
    }, 
    TXT: {
        цвет: ' #fff ' , 
        FontSize: 18 
    }, 
    задняя часть : { 
        ширина: 25 , 
        высота: 25 
    } 
});

У нас есть время, чтобы GIT наклейки с адресом. , , , , ,