Есть гайды по написанию чата??

Буду рад если поделитесь инфой 💪

Есть гайды по написанию чата??

https://github.com/FaridSafi/react-native-gifted-chat прикручиваешь к нему firebase firestore или firebase database и получаешь рабочий чат за 1 день

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

react-navigation?

react-navigation?

v5, да

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

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

v5, да

@gblack9 есть, да ) хоть и не самым привычным способом. в v4 было чуть более явно (достаточно добавить action в navigate), но и сейчас можно, { params: { screen, params: { screen }}. https://reactnavigation.org/docs/en/nesting-navigators.html#navigating-to-a-screen-in-a-nested-navigator https://reactnavigation.org/docs/en/upgrading-from-4.x.html#navigating-to-nested-screens

Оу, большущее спасибо

Есть React Native книга? на русском языке

@gblack9 есть, да ) хоть и не самым привычным способом. в v4 было чуть более явно (достаточно добавить action в navigate), но и сейчас можно, { params: { screen, params: { screen }}. https://reactnavigation.org/docs/en/nesting-navigators.html#navigating-to-a-screen-in-a-nested-navigator https://reactnavigation.org/docs/en/upgrading-from-4.x.html#navigating-to-nested-screens

В v4 было как раз более неявно... она сама умудрялась найти ближайший роут соответствующий акшну. Но зато там есть страшные баги... вот пример, в пятницу только убил 4 часа на переделку системы основного меню в приложении (всё стандартно - дравер с кучей стеков). Один стек с подменю, пункты которого должны менять параметр в одном экране... В итоге через path сделал (заодно дип линкинг потом легко добавить будет)... А вот сам хак: private onMenuPress = (path: string) => { const nav = this.props.navigation; if (path === 'exit') { this.props.logoutWithConfirmation(); } else { let action = nav.router.getActionForPathAndParams(path); if (action.type === NavigationActions.NAVIGATE && action.action) { // HACK: extract inner action for submenus (because top action will not update params) action = action.action; } nav.dispatch(action); } nav.dispatch(DrawerActions.closeDrawer()); }; Потому что когда action, содержит вложенные акшны, они почему-то не обновляют параметры экрана... (

TextInput не работает paste autofill <ScrollView removeClippedSubviews={false}> и height: Platform.OS == 'android' ? 40 : 20не помогает. Как заставить работать данный функционал?

ребята, можете посоветовать либу для передачи видео?

у меня на amazon s3 хранятся ролики, которые передаются через nodejs в само приложение. Сейчас передаётся просто ссылка и загрузка крупных роликов (100-200мб) занимают время

Мб есть какой-то быстрый способ развернуть кодирование?

У меня expo, возможно там с этим проще

Пытаюсь по кнопке Next на клавиатуре перейти к следующему TextInput Делаю как тут https://stackoverflow.com/a/32753780, но не понимаю, откуда берется this.secondTextInput В итоге очевидно получаю ошибку TypeError: undefined is not an object (evaluating '_this.secondTextInput = input')

Пытаюсь по кнопке Next на клавиатуре перейти к следующему TextInput Делаю как тут https://stackoverflow.com/a/32753780, но не понимаю, откуда берется this.secondTextInput В итоге очевидно получаю ошибку TypeError: undefined is not an object (evaluating '_this.secondTextInput = input')

Пункт №1 в ответе по твоей же ссылке

Пункт №1 в ответе по твоей же ссылке

<TextInput style={SharedStyles.loginTextInput} placeholder='Email' onSubmitEditing={() => { this.passInput.focus(); }} blurOnSubmit={false} ></TextInput> <TextInput style={SharedStyles.loginTextInput} placeholder='Password' ref={(input) => { this.passInput = input; }} ></TextInput>

Неужели они связываются чисто по плейсхолдеру?

<TextInput style={SharedStyles.loginTextInput} placeholder='Email' onSubmitEditing={() => { this.passInput.focus(); }} blurOnSubmit={false} ></TextInput> <TextInput style={SharedStyles.loginTextInput} placeholder='Password' ref={(input) => { this.passInput = input; }} ></TextInput>

Вот у меня в первом onSubmitEditing={() => { this.passInput.focus(); }} И во втором текстинпуте ref={(input) => { this.passInput = input; }}

Неужели они связываются чисто по плейсхолдеру?

Похоже на то. А можно как-то по-другому это обыграть через какие-нибудь айдишники? А то вдруг у меня в плейсхолдере будет 我是俄罗斯人, мне что делать?)

Плейсхолдер тут ни при чём, ты можешь в ref, как угодно назвать input

Плейсхолдер тут ни при чём, ты можешь в ref, как угодно назвать input

У меня получилось в компоненте создать let passInput = React.createRef(); А затем уже обращаться к нему. Я так и должен был делать?)

А так как на примере не заработало или как?

А так как на примере не заработало или как?

Сам пример заработал, но если я меняю плейсхолдеры - он не находит refы (undefined)

Меняешь и в ref и в onSubmitEditing?

Меняешь и в ref и в onSubmitEditing?

this.* переменная конечно же одинаковая

Только вот из коробки оно похоже определяет имя переменной по плейсхолдеру

Ну вот я недавно делал, у меня плейсхолдер был "Год", а рефка yearInput Оно как бы не должно быть связано

Ну вот я недавно делал, у меня плейсхолдер был "Год", а рефка yearInput Оно как бы не должно быть связано

return( <TextInput style={SharedStyles.loginTextInput} placeholder='Email' onSubmitEditing={() => { this.passInput.focus(); }} blurOnSubmit={false} ></TextInput> <TextInput style={SharedStyles.loginTextInput} placeholder='Password' ref={(input) => { this.passInput = input; }} ></TextInput> ); TypeError: undefined is not an object (evaluating '_this.passInput = input')

return( <TextInput style={SharedStyles.loginTextInput} placeholder='Email' onSubmitEditing={() => { this.passInput.focus(); }} blurOnSubmit={false} ></TextInput> <TextInput style={SharedStyles.loginTextInput} placeholder='Password' ref={(input) => { this.passInput = input; }} ></TextInput> ); TypeError: undefined is not an object (evaluating '_this.passInput = input')

Наверно стоит учесть, что у меня вот такой компонент и именно тут проблема? const SignIn = ({ navigation: { navigate } }) => { return( ... export default SignIn;

всем привет, подскажите, так ли стиль типизировать style: StyleProp<ViewStyle> и для текста TextStyle

Все правильно. StyleProp значит, что можно передать как массив, так и объект. Для View - StyleProp<ViewStyle>. Для Text - StyleProp<TextStyle>

Установите @types/react-native - там все задокументировано

Ребята, кто шарит в кишках FlatList-а? Кто может объяснить, почему он ведёт себя так, как описано в примере? https://stackoverflow.com/questions/57381341/flatlist-re-render-all-data-when-new-data-is-added Не нужно предлагать варианты решения, я их знаю. Мне интересно, почеему поведение именно такое

Ребята, кто шарит в кишках FlatList-а? Кто может объяснить, почему он ведёт себя так, как описано в примере? https://stackoverflow.com/questions/57381341/flatlist-re-render-all-data-when-new-data-is-added Не нужно предлагать варианты решения, я их знаю. Мне интересно, почеему поведение именно такое

Потому что он pure component...

Потому что он pure component...

А чуть подробнее?

Потому что он pure component...

Я понимаю, почему он перерисовывает все 20 элементов при загрузке второй страницы. Но зачем он перед этим повторно отрисовывает первые 10?

Привет, ребята, как лучше реализовать синхронизацию данных на сервер? Чтобы после включения интернета данные синхронизировались.

Я понимаю, почему он перерисовывает все 20 элементов при загрузке второй страницы. Но зачем он перед этим повторно отрисовывает первые 10?

Потому что по определению "pure component" при изменении идентити любого св-ва перерендеривается. Дальше, но это уже подробности реализации, которые на его pure натуру никак не влияют. FlatList обеспечивает "окно" с теми данными, что предположительно видны на экране. Но, и в документации это описано, это тоже условно... в реальности, у него есть некая часть "головы" списка, она всегда примонтирована и это самое "окно" довольно большого размера. Вот при рендере, он рендерит "голову" и "окно". Ваши 10 первых и следующие 10 попадают и туда и туда, вот они рендерятся при смене идентити любого св-ва FlatList. А идентити меняется, т.к. в при добавлении элемента в data приходит абсолютно новый массив. Так получилось подробней? На вопрос почему именно такой интерфейс выбрали в фейсбуке для оконного списка я ответить не могу...

Никто не знает решение этой проблемы при подключении к Firebase? Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info. (Saw setTimeout with duration 307892ms) В issue на гитхабе вроде так и нет никакого решения, разве что workaround-ы.

Потому что по определению "pure component" при изменении идентити любого св-ва перерендеривается. Дальше, но это уже подробности реализации, которые на его pure натуру никак не влияют. FlatList обеспечивает "окно" с теми данными, что предположительно видны на экране. Но, и в документации это описано, это тоже условно... в реальности, у него есть некая часть "головы" списка, она всегда примонтирована и это самое "окно" довольно большого размера. Вот при рендере, он рендерит "голову" и "окно". Ваши 10 первых и следующие 10 попадают и туда и туда, вот они рендерятся при смене идентити любого св-ва FlatList. А идентити меняется, т.к. в при добавлении элемента в data приходит абсолютно новый массив. Так получилось подробней? На вопрос почему именно такой интерфейс выбрали в фейсбуке для оконного списка я ответить не могу...

Кажется, вы знаете то, что мне интересно, но я ещё не уловил соль. Что вы называете идентити? В данном примере - это область памяти, в которой хранится массив? И я не очень уловил про голову и окно.. Что всё-таки происходит, когда загрузилась новая страница и в пропсы FlatList-а передался новый массив из 20 элементов вместо старого массива из 10?

Кажется, вы знаете то, что мне интересно, но я ещё не уловил соль. Что вы называете идентити? В данном примере - это область памяти, в которой хранится массив? И я не очень уловил про голову и окно.. Что всё-таки происходит, когда загрузилась новая страница и в пропсы FlatList-а передался новый массив из 20 элементов вместо старого массива из 10?

Идентити объекта в JS, это собственно и есть инстанс объекта... т.е. условно говоря доступ к объектам происходит по ссылке, любая пременная, через которую можно получить данные из объекта - это ссылка на объект. То, на что она указывает - это идентити... "значение в ссылке", "адрес в памяти"... в кавычках, потому что v8, к примеру, умеет двигать объекты в памяти (особенность работы GC). JS в этом смысле не замкнут в этих операциях - невозможно получить значение идентити, но можно про него узнать, операциями ===, !== и Object.is

Про голову, из оф доков (https://facebook.github.io/react-native/docs/flatlist#initialnumtorender): How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.

Идентити объекта в JS, это собственно и есть инстанс объекта... т.е. условно говоря доступ к объектам происходит по ссылке, любая пременная, через которую можно получить данные из объекта - это ссылка на объект. То, на что она указывает - это идентити... "значение в ссылке", "адрес в памяти"... в кавычках, потому что v8, к примеру, умеет двигать объекты в памяти (особенность работы GC). JS в этом смысле не замкнут в этих операциях - невозможно получить значение идентити, но можно про него узнать, операциями ===, !== и Object.is

понял, спасибо! Поизучаю документацию поглубже

понял, спасибо! Поизучаю документацию поглубже

Советую с VirtualizedList читать, потому что FlatList просто враппер вокруг него и на самом деле наследует все его св-ва, а там как раз управление окном и прочие подробности: https://facebook.github.io/react-native/docs/virtualizedlist#windowsize Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing this number will reduce memory consumption and may improve performance, but will increase the chance that fast scrolling may reveal momentary blank areas of unrendered content. В частности, как видно, дефолтное "окно", это 10 экранов выше/ниже, что довольно много

всем привет, подскажите, так ли стиль типизировать style: StyleProp<ViewStyle> и для текста TextStyle

True

Именно поэтому многие ругаются на тормознутость флет-листа... не разобравшись, что он будучи использован вместо простого рендера списка в ScrollView, на самом деле всё равно монтирует и рендерит все данные для нормальных юзкейсов... а польза от него (без тюнинга) начинается на реально больших списках. Это на самом деле компонент, который лучше всего расчитан на стандартный кейс фейсбука - крупные карточки в ленте и бесконечный скролл... пользователь в основном листает только в низ, назад возвращается только при рефреше и в самый верх

return( <TextInput style={SharedStyles.loginTextInput} placeholder='Email' onSubmitEditing={() => { this.passInput.focus(); }} blurOnSubmit={false} ></TextInput> <TextInput style={SharedStyles.loginTextInput} placeholder='Password' ref={(input) => { this.passInput = input; }} ></TextInput> ); TypeError: undefined is not an object (evaluating '_this.passInput = input')

У тебя компонент-класс или функция?

Советую с VirtualizedList читать, потому что FlatList просто враппер вокруг него и на самом деле наследует все его св-ва, а там как раз управление окном и прочие подробности: https://facebook.github.io/react-native/docs/virtualizedlist#windowsize Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing this number will reduce memory consumption and may improve performance, but will increase the chance that fast scrolling may reveal momentary blank areas of unrendered content. В частности, как видно, дефолтное "окно", это 10 экранов выше/ниже, что довольно много

Это немного не то, вроде как. Окно - это про рендер текущих элементов, а мой вопрос не про то, что рендерятся сразу все 20 элементов, а про то, почему перед этим рендерятся старые 10 элементов

Это немного не то, вроде как. Окно - это про рендер текущих элементов, а мой вопрос не про то, что рендерятся сразу все 20 элементов, а про то, почему перед этим рендерятся старые 10 элементов

Да они все рендерятся, что примонтированы... а примонтированы те, что в initial batch ("голова") входят и те, что в "окно"... Там был баг/деоптимизация не знаю исправили ли, что то, что в "голову" и в "окно" одновременно входят, два раза ререндерились... но сути это не меняет. Это pure component, он при любом изменении свойств ререндерится целиком

Да они все рендерятся, что примонтированы... а примонтированы те, что в initial batch ("голова") входят и те, что в "окно"... Там был баг/деоптимизация не знаю исправили ли, что то, что в "голову" и в "окно" одновременно входят, два раза ререндерились... но сути это не меняет. Это pure component, он при любом изменении свойств ререндерится целиком

Вот баг про голову и окно похож на объяснение

У тебя компонент-класс или функция?

А я чуть ниже написал, вроде функция получается

https://t.me/reactnative_ru/163343

https://t.me/reactnative_ru/163343

У тебя проблема при попытке обратиться к this, судя по всему. Используй либо класс, либо useRef (или как там в хуках)

У тебя проблема при попытке обратиться к this, судя по всему. Используй либо класс, либо useRef (или как там в хуках)

Да, решил через useRef (или createRef, не помню уже)

Создал переменную и записал туда

А кто то использует редакс на реакт нейтив? ) А кто не использует, то на чем пишите? )

А кто то использует редакс на реакт нейтив? ) А кто не использует, то на чем пишите? )

да

согласен ))

А кто то использует редакс на реакт нейтив? ) А кто не использует, то на чем пишите? )

Я в текущем проекте. Вынужденно. Была бы моя воля (и в двух предидущих больших проектах так было) использовал бы mobx.

А в чем разница между ними?

MobX масштабируется гораздо лучше )

А в чем разница между ними?

Основная разница в том, что с redux приходится постоянно думать о том чтоб рендерилось только то, что действительно должно и не всегда это получается. Приходится постоянно думать о том как написать эффективно редьюсер, как селекторы... В итоге всё равно это не получается. В mobx думать надо гораздо меньше, при изменении данных, ререндерятся только те компоненты, которые реально используют именно эти данные. Эквивалент селекторов - computed св-ва, кешируются автоматически при подписки и никогда не вычисляются лишний раз... то, чего даже re-select/rereselect не даёт на самом деле

Тогда вопрос, никогда не работал ни с тем ни с тем, что лучше начать учить для начала

Начни с нативного андройда или свифта =)

А серьезно

Я сама сурьезность =)

React Native нельзя рассматривать как полноценную альтернативу нативки, скорее как оптимизацию на небольших проектах.

React Native нельзя рассматривать как полноценную альтернативу нативки, скорее как оптимизацию на небольших проектах.

если чтото Очень хочеться можно же дописать на нативке

есть еще вопрос производительности и многопоточности которые сильно помогают в решении сложных задач

у меня такой вопрос я тут замечал что многие тут спрошывают как сделат стили на xml для андроида. а зачем не хватает StyleCreate?

на реакте?

Тогда вопрос, никогда не работал ни с тем ни с тем, что лучше начать учить для начала

redux можно за 1час понять (но не все обвязки, которые вам придется использовать в реальной жизни... потому что redux в реальном проекте, это immer, redux-persist, redux-thunk или redux-saga, reselect и много-много разного другого хлама)... mobx гораздо сложнее, но зато в нем есть практически всё что нужно, а чего нет, делается в 10 строк кода, для понимания можно вот это почитать https://habr.com/ru/post/349022/

redux можно за 1час понять (но не все обвязки, которые вам придется использовать в реальной жизни... потому что redux в реальном проекте, это immer, redux-persist, redux-thunk или redux-saga, reselect и много-много разного другого хлама)... mobx гораздо сложнее, но зато в нем есть практически всё что нужно, а чего нет, делается в 10 строк кода, для понимания можно вот это почитать https://habr.com/ru/post/349022/

Согласен, на последнем проекте использую @redux/toolkit, там весь bag почти, за исключением саг

Часто пытаюсь заставить себя написать что-то с MobX, но сталкиваюсь с тем, что найти best practice довольно тяжело. Примеров с новым апи с хуками просто нет

ребят, сел в первый раз на native. поставил ant.design, пытаюсь использовать примеры из него и все рушится. То текста должен быть в Text, то еще что-то. ant.design из коробки не работает? вот это постоянно лезет еще Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI., RootErrorBoundary

ребят, сел в первый раз на native. поставил ant.design, пытаюсь использовать примеры из него и все рушится. То текста должен быть в Text, то еще что-то. ant.design из коробки не работает? вот это постоянно лезет еще Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI., RootErrorBoundary

В реакт нейтиве? Из коробки не работает и не из коробки не работает

Друзья, я новенький в нэйтиве. Устройство с установленным приложением раздаёт вайфай, можно ли через нейтив получить список mac адресов подключённых устройств?