Доброго времени суток! Почему вызванная мной функция не выводит данные из JS-объектов в React Native?: function renderSetItem (style, query) { query.map((q) => { if(typeof q.response === 'boolean'){ ( {q.title} ) } else if(typeof q.response === 'string'){ ( {q.title} {q.response} ) } else if(typeof q.response === 'number'){ ( {q.title} ) } }); } export default function App() { const configData = [ { title: 'Язык приложения и его данных', name: 'lang', response: 'ru' }, { title: 'Размер категории', name: 'catS', response: 12 }, { title: 'Размер карточек', name: 'cardS', response: 6 }, { title: 'Размер панели предложении', name: 'panelS', response: 9 }, { title: 'Отображение текста', name: 'text', response: true }, { title: 'Автоочистка панели предложении', name: 'panelControl', response: false }, { title: 'Поворот экрана', name: 'turn', response: false } ]; return ( Параметры {renderSetItem(styles, configData)} ); } const styles = StyleSheet.create({ cardsPage : { flex: 1, padding: 8, margin: 4 }, page: { flex: 1, padding: 4, margin: 2 }, title: { fontSize: "xx-large", fontWeight: "bold", color: "#EA005E" }, item: { meta: { single: { width: "90%", margin: "0 auto", boxShadow: "10px 6px 8px 0px rgba(34, 60, 80, 0.2)" }, group: { width: "55%", marginLeft: "2%" } }, content:{ left: { name: { fontSize: "large", marginLeft: "2%", fontWeight: 500 }, value: { fontSize: "small", marginLeft: "2%", fontSize: 300, color: "gray" } }, right: { button: { }, switcher: { } } } } }); В чём причина данной проблемы и как её решить? Заранее вам спасибо и перед вами основание для данного вопроса, чтобы вы посмотрели, что здесь не так(https://snack.expo.dev/@zolotaryow_inv/pecssettings_cards)!

без return js обычно ничего не выводит )

Доброго времени суток! Недавно я начал работать с библиотекой expo-router для создания подразделов настроек мобильного приложения. И переходя в раздел настроек, компилятор поругался на якобы нехватку метода navigate в private-методе компонента: Cannot read properties of undefined (reading 'navigate') Так как я являюсь новичком в мобильной разработке и самой экосистеме React, подскажите мне пожалуйста: Как сделать так, чтобы при открытии раздела настроек не появлялась данная ошибка и при клике на пункт меню без проблем открывался сам подраздел? Заранее вам спасибо! Сам проблемный пример в качестве сути вопроса ради углублённого его изучения: https://snack.expo.dev/@zolotaryow_inv/pecscards P.S.: На фото структура приложения и раздела подразделов настроек и т.п.

Пиши на функциональных компонентах

у тебя в navigation в твоем методе ничего не приходит

И при правильном использовании useRouter из expo-router та же песня

И при правильном использовании useRouter из expo-router та же песня

в классовом компоненте использовать хук, утчи матчасть

Я никогда глубоко с хуками не работал;-(

Удобный каталог библиотек для RN, особенно полезна вкладка Trending. https://reactnative.directory/

Привет, слушайте есть кто на связи тут?

Доброго дня! Почему не производится редирект на запрашиваемый компонент при срабатывании на onPress в шаблоне с меню снизу на React Navigation?

Из createBottomNavigator: <Stack.Screen name="aboutSet" component={AboutSettings} options={{ presentation: "modal", tabBarButton: (props) => null, title: 'О приложении' }} /> <Stack.Screen name="cardsSet" component={CardsSettings} options={{ presentation: "modal", tabBarButton: (props) => null, title: 'Приложение' }} /> <Stack.Screen name="mediaSet" component={MediaSettings} options={{ presentation: "modal", tabBarButton: (props) => null, title: 'Карточки и данные' }} /> <Stack.Screen name="securitySet" component={SecuritySettings} options={{ presentation: "modal", tabBarButton: (props) => null, title: 'Безопасность' }} />

Сам проблемный компонент: export class SettingsScreen extends Component { constructor(props) { super(props); } render = () => { return ( <View style={stylesS.container}> <View style={stylesS.wccId.container}> <Image source={ { uri: 'https://img.icons8.com/fluency-systems-filled/96/ffffff/guest-male.png' } } style={stylesS.wccId.item.avatar} /> <View style={stylesS.wccId.item.anounce.block}> <Text style={stylesS.wccId.item.anounce.heading}>WCC ID - очень скоро!</Text> <Text style={stylesS.wccId.item.anounce.text}>Все возможности Карточек и не только в одной учётной записи</Text> </View> </View> <View style={stylesS.setting.container}> <Text style={stylesS.setting.item.content} onPress={this.__redirectToSubPage('cardsSet')}>Параметры приложения</Text> <Text style={stylesS.setting.item.content} onPress={this.__redirectToSubPage('securitySet')}>Безопасность и уведомления</Text> <Text style={stylesS.setting.item.content} onPress={this.__redirectToSubPage('mediaSet')}>Медиа и прочие данные</Text> <Text style={stylesS.setting.item.content} onPress={this.__redirectToSubPage('aboutSet')}>О приложении</Text> </View> </View> ) } __redirectToSubPage = (page) => { return this.props.navigation.navigate(page); } }

Почему не так популярна эта либа? https://github.com/yamankatby/react-native-flex-layout Может есть аналоги? Делимся

вижу 2 причины: 1. год без обновлений 2. сахар вокруг стилей

там обновлять нечего, сама библиотека для того, чтобы меньше стилей писать )

о том и речь, это простейший UI-framework, который непонятно кому нужен 🤷‍♂️

это не UI-framework. А ты как поступаешь когда например просто надо прописать flex-direction?

Почему не так популярна эта либа? https://github.com/yamankatby/react-native-flex-layout Может есть аналоги? Делимся

Почему не так популярна эта либа? https://github.com/yamankatby/react-native-flex-layout Может есть аналоги? Делимся

пишу flex-direction если тебе нужен uikit, ты ставишь native-base, react-native-elements или прочие material и чаще всего uikit`ы уже имеют компоненты для разметки. если подобное тащить не хочется, есть styled, юзаю его. я к тому, что если уж тащить себе uikit, то обычно это большой кит. а если большой не нужен, проще стили в styled прописать. хотя может это чисто моя привычка, мне css-liked стили нравятся куда больше, чем пропсы в компонентах

Где пишешь? Inline стили?

https://styled-components.com/

Те создаешь новый стиль, даже компонент

да, считай тот же инлайн, только более удобный (для меня)

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

Те ререндеров лишних не будет?

я не смотрел сурсы стайледа и не чекал бандл, но по логике стайлед компилирует стили в инлайн/компоненты, я бы сделал именно так. в любом случае я не помню проблем с перфом из-за стайледа и тем более не будет лишних ререндеров, с чего бы

Причем тут исходники, если речь о пропсах идет, inline стиль это новый объект при ререндере

ну ещё раз повторю, я не в курсе что делает стайлед под капотом, создаёт новый компонент или пишет инлайн стили. но у телефонов сейчас по 4 гига оперы, может хватит уже истерить на тему "при ререндере это будет новый объект"? ) в 23 году это экономия на спичках в последнюю очередь после остального рефакторинга

хз, у меня несколько проектов в проде и всё ок, в том числе reactjs+antd+styled, таблицы по 1000+ строк, всё летает. в react-native приложения столько данных, конечно, не приходит, но есть тот же flashlist. я пока не сталкивался с проблемами типа "при ререндере это будет новый объект". возможно в том числе потому, что для сторов юзаем mobx, который спасает от лишних ререндеров

Mobx не mobx а изменение пропса вызывает ререндер

нет смысла прокидывать пропсы через родителя, если из ребёнка можно обратиться к стору 🤷‍♂️

Inline стили это что? Есть смысл прикидывать пропсы, хотябы рекомендации mobx почитай

инлайн стили, это <View style={...}, собственно то же самое, что было инлайн стиляем последние 20 лет в веб разработке. рекомендации mobx по прокидыванию пропсов? такое есть? поделитесь ссылкой?

https://mobx.js.org/react-optimizations.html

https://mobx.js.org/react-optimizations.html

https://mobx-cookbook.github.io/ вот ребята из чата по mobx собрали более-менее свежую документацию, если интересно. то что вы скинули — 2 года не обновлялось

Принцип не поменялся

окей, как скажете, обсервабл-объекты это миф, хуки не работают, mobx не борется с лишними ререндерами, а inline стили заставляю приложения тормозить )

Тот же inline? А что перфоманс может одинаковый?