Yura
Здравствуйте, как сделать такую маску для телефона +7 (___) ___--, чтобы при вводе шаблон(+7, скобки и черточки) маски оставался?
Irakliy
react native textinput mask
Irakliy
их две библиотеки, вроде. Одна нативная, другая на js
Alexey
imask попробуй
Yura
надо чтобы был шаблон для ввода и он никуда не исчезал, все они делают по-другому, при вводе исчезает
Kto?
+
Gena
Да, и "плохой солюшн" тут - RN, поэтому добро пожаловать в мир РН )
Почему?
- Отсутствие возможности выполнить код JS в основном потоке (на этом пункте можно было бы остановиться, остальное мелочи)
- Отсутствие возможности сделать высокоэффективную передачу данных JS<->Native (всегда копирование)
- Отсутсвие возможности легко сделать нативный компонент со своим лэйаутом (только Yoga)
"тормозящая" маска проистекает из первого пункта.
Gena
Как раз писал... )
Konstantin
Привет всем, кто-нибудь имеет богатый опыт работы с react-native-navigation от wix?
Gena
Да, можно. Но, придется правила для маски передавать из JS, а т.к. эти правила могут быть мега сложными, то это не просто. Можно так сделать, но до сих пор никто не сделал. Тот нативный компонент на который ссылались пытается обойтись малой кровью и там маска нативная, но она расширяет стандартный RN'овский TextInput, который мега сложный и в результате там довольно много глюков.
Konstantin
В моем проекте wix и mobx, при передаче через passProps данных из store, он "убивает" ссылку на объект store, можно ли этого как-то избежать без костылей?
Gena
В моем проекте wix и mobx, при передаче через passProps данных из store, он "убивает" ссылку на объект store, можно ли этого как-то избежать без костылей?
Нет. Я не очень уверен, но скорей всего, оно передает данные в натив, значит сериализует, при этом как раз потеряются все ссылки на глобальные объекты и десериализованные объекты больше не будут связаны с исходными. Поэтому единственный способ, передавать эти данные в виде своего слоя сериализации/десериализации... Условно при создании экрана сохранять в глобальный мэп по id параметры для него, а при рендере эти параметры доставать и инжектить в компонент. При уничтожении экрана соотвественно чистить элемент мэпа.
Konstantin
Нет. Я не очень уверен, но скорей всего, оно передает данные в натив, значит сериализует, при этом как раз потеряются все ссылки на глобальные объекты и десериализованные объекты больше не будут связаны с исходными. Поэтому единственный способ, передавать эти данные в виде своего слоя сериализации/десериализации... Условно при создании экрана сохранять в глобальный мэп по id параметры для него, а при рендере эти параметры доставать и инжектить в компонент. При уничтожении экрана соотвественно чистить элемент мэпа.
Ну вот мне тоже самое пришло в голову, но ощущение, что это костыль
Gena
Ну вот мне тоже самое пришло в голову, но ощущение, что это костыль
Это ограничение бриджа, у всех так. У тех, у кого это не так, просто этот же костыль на уровне фреймворка реализован. На самом деле, к примеру (может быть устаревшая инфа, но ещё в 0.49 так было), бридж даже коллбэки JS'ные не может в натив передать, он их так же сохраняет в JS, а в натив сгенерированный id'шник передает...
Gena
Да, точно, вон и сейчас все таймеры, промисы и коллбэки что должны из натива дернуться, все на стороне JS держатся: https://github.com/facebook/react-native/blob/0.62-stable/Libraries/BatchedBridge/MessageQueue.js#L43-L45
Денис
Как через XCode запустить релизную версию на девайсе? На андроиде все работает через react-native run-android --variant=release
Денис
react-native run-ios --configuration Release запускает эмулятор
Artemka
Всем привет!
Как переопределить стили компонента (или как оно там называеться) в другом экране, где я его вызыаю ?
у меня есть экран Main.js
const Logo = () => (
<Image source={require('../assets/logo.png')} style={styles.image} />
);
const styles = StyleSheet.create({
image: {
width: 200,
height: 70,
},
});
и есть экран Screen2.js где я использую этот компонент
<Logo style={styles.image}/>
const styles = StyleSheet.create({
image: {
width: 100,
height: 200,
marginBottom: 100,
},
});
и используя ту же схему у меня не получаеться изменить стили этого компонента <Logo>
Подскажите пожалуйста как мне это сделать ?
S
style={[style.img1, style.img2]}
Artemka
style={[style.img1, style.img2]}
в экран Main.js ?
мне там определить стили "style.img2" ?
типа:
const styles = StyleSheet.create({
image1: {
width: 200,
height: 70,
},
image2: {
width: 100,
height: 200,
marginBottom: 100,
},
});
и на экране Screen2.js прописать для компонента
<Logo style={[style.img2]}/>
так ?
Maxim 📱 D
в экран Main.js ?
мне там определить стили "style.img2" ?
типа:
const styles = StyleSheet.create({
image1: {
width: 200,
height: 70,
},
image2: {
width: 100,
height: 200,
marginBottom: 100,
},
});
и на экране Screen2.js прописать для компонента
<Logo style={[style.img2]}/>
так ?
в кратце прокинь пропсами стиль в мейн
Artemka
в кратце прокинь пропсами стиль в мейн
мне нужно из Main где изначально определены стили для
const Logo = () => (
<Image source={require('../assets/logo.png')} style={styles.image} />
);
в Screen2.js
где я использую rjvgjytyn <Logo style={styles.image}/>
"в кратце прокинь пропсами стиль в мейн"
это как? я полный ноль
Irakliy
Всем привет!
Как переопределить стили компонента (или как оно там называеться) в другом экране, где я его вызыаю ?
у меня есть экран Main.js
const Logo = () => (
<Image source={require('../assets/logo.png')} style={styles.image} />
);
const styles = StyleSheet.create({
image: {
width: 200,
height: 70,
},
});
и есть экран Screen2.js где я использую этот компонент
<Logo style={styles.image}/>
const styles = StyleSheet.create({
image: {
width: 100,
height: 200,
marginBottom: 100,
},
});
и используя ту же схему у меня не получаеться изменить стили этого компонента <Logo>
Подскажите пожалуйста как мне это сделать ?
const Logo = props => (
<Image source={require('../assets/logo.png')} style={[styles.image, props.style]} />
);
const styles = StyleSheet.create({
image: {
width: 200,
height: 70,
},
});
S
именно
Maxim 📱 D
Artemka
Irakliy
в Main.js или Screen2.js ?
в main, потом просто передаёшь проп style в любом месте, где вызываешь компонент
Artemka
спасибо
Irakliy
👍
Den
Всем привет скажите как сделать такой контроль как lock screen бы линеей селектить буквы
Maxim 📱 D
Всем привет скажите как сделать такой контроль как lock screen бы линеей селектить буквы
не понятно, на локскрине буквы селектить свайпом?
Den
ну типа того
Den
Не могу нагуглить как даный тип контрола называется
Den
Тоесть у меня на экране есть буквы а я свайпом их селекчу и от буквы к букве прокладывается линия
Maxim 📱 D
это на клавиатуре так делается
Maxim 📱 D
https://blog.usejournal.com/android-pattern-lock-with-react-native-and-expo-c94c58a5d343
Vadim
Мағжан
Мағжан
через Analyze APK
Ivan
Привет ребят!
Рассматриваю react native для разработки mobile app, можете подсказать, нигде не могу найти, сильно или отличается интерфейс разработанной app в android и ios и можно ли сделать уникальный дизайн одинаковый в обоих системах на react native
Den
Ребят кто-то знает решение есть 3 svg обекта и при таче нужно провести между ними линию
Konstantin
Привет ребят!
Рассматриваю react native для разработки mobile app, можете подсказать, нигде не могу найти, сильно или отличается интерфейс разработанной app в android и ios и можно ли сделать уникальный дизайн одинаковый в обоих системах на react native
Нативный интерфейс отличается, но если под один дизайн все подогнать, то почти одинаково будет
Eduard
Eduard
Eduard
почему-то
Aleksei
Denis
Мне нужно по useEffect, проверить дату последнего логина с текущего, и отрендерить либо логин форму, либо другой экран.
Но useEffect отрабатывает позже, чем рендерится экран, и происходит небольшой блик. Можно показывать лоадер, либо может есть более элегантное решение?
Eduard
0.61.4
Irakliy
Мне нужно по useEffect, проверить дату последнего логина с текущего, и отрендерить либо логин форму, либо другой экран.
Но useEffect отрабатывает позже, чем рендерится экран, и происходит небольшой блик. Можно показывать лоадер, либо может есть более элегантное решение?
useEffect срабатывает после рендера, как componentDidMount, если я правильно понимаю
Eduard
ну у меня в Podfile стоял при post_install React.target.remove
Eduard
чет-такое, даже если я добавлю его в build targets, то все равно эта ошибка
Vetaly
Привет, какие useCase в static методах в компонентах? Кроме navigationOptions
Artur
Привет, какие useCase в static методах в компонентах? Кроме navigationOptions
Привет, много их, например когда надо вместе с компонентом расшарить немного кода для других компонентов.
Artur
Иммутабельные функции в основном
Vetaly
а смысл? можно же брать эти функции из utils
Artur
а смысл? можно же брать эти функции из utils
Можно. А можно из того же модуля что и сам компонент. А можно и из самого компонента в виде статической функции
Artur
Смысл в том что разницы особо никакой нет, можно делать по всякому, делай как удобно
Vetaly
тоесть это просто вкусовщина, да? Я просто не вижу смысл перегружать компонент методами, которые можно вынести в отдельную функцию
Artur
тоесть это просто вкусовщина, да? Я просто не вижу смысл перегружать компонент методами, которые можно вынести в отдельную функцию
не видишь смысла - не делай. Да, вкусовщина
Vetaly
спасибо
Andrei
Мне нужно по useEffect, проверить дату последнего логина с текущего, и отрендерить либо логин форму, либо другой экран.
Но useEffect отрабатывает позже, чем рендерится экран, и происходит небольшой блик. Можно показывать лоадер, либо может есть более элегантное решение?
useLayoutEffect отрабатывает до рендера
Artemka
В общем мне помогли другие люди разобраться в моем вопросе и для тех, кто использует поиск по каналу:
" ПЕРЕОПРЕДЕЛЕНИЕ СТИЛЕЙ в другом экране/скрине/screen ":
из файла Screen1.js где "инициализирован" наш "компонент"
const Logo = props => (
<Image source={require('../assets/logo.png')} style={[styles.image, props.myVar]} />
);
// дефолтные стили
const styles = StyleSheet.create({
image: {
width: 200,
height: 70,
backgroundColor: '#F4A8A8',
},
});
делаем переопределение наших стилей в Screen2.js
<Logo myVar={styles.image2}/>
// переопределение стилей
const styles = StyleSheet.create({
image2: {
backgroundColor: '#000000',
},
});
вот так легко и просто и без ваших там "юзай промпсы", "читай мануал", "это же элементарно".
Artemka
собственно, сделал как тебе и говорили в самом начале
собственно вы мне написали кучу непонятных слов и примеров, которые не работали, когда я вставил их в свой код.
мне нужен был просто рабочий пример как это сделать, а не объяснение почему и как оно работает и должно работать, и посылать читать мануалы про промпсы и зачем они нужны.
мне просто нужно было переопределить стиль, а не гуглить
"react navive promps"
Ну вот пример из доков:
https://ru.reactjs.org/docs/components-and-props.html
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
и он мне никак не помог разобраться в том как перезаписать стиль. У меня нет function-сов никаких,
<UserInfo user={props.author} />
фиг знает откуда они взяли "props.author"
перейдя на источник примера ты находишь это:
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'https://placekitten.com/g/64/64',
},
};
и понимаешь что тебе нужно создать константу "const comment" для того чтобы потом засунуть ее значение в функцию
"function Comment(props) " где ты сможешь ее вызвать так "user={props.author}"
и хрен его знает сработает ли этот вызов в другом файле