Dmitry
а теперь представьте сколько под капотом парсеров и валидаторов, чтобы простейший стиль провернуть и пропсы туда подсунуть
Dmitry
и это на каждый styled компонент
чей ты
Ахах. Окей.
Мое мнение — да. Но это не веб, здесь такой острой необходимости нет, да и css ограничен.
это невкоем случаее не ксс )
"abstraction similar to CSS"
Sergey
это невкоем случаее не ксс )
"abstraction similar to CSS"
Блин, давай до букв докапываться
Sergey
а теперь представьте сколько под капотом парсеров и валидаторов, чтобы простейший стиль провернуть и пропсы туда подсунуть
В реакт-дом производительности не настолько высокое, чтобы это можно было всерьез принимать за проблему. Здесь тем более.
Sergey
А удобство и наглядность разработки повышается в разы.
чей ты
А удобство и наглядность разработки повышается в разы.
зачёт чего ''повышается в разы"?
Dmitry
вот этим
export const Wrapper = styled.View`
width: 100%;
background-color: ${({ theme }: { theme: ITheme }) => theme.common.color.white};
padding: 8px 12px;
border: ${({ theme }: { theme: ITheme }) => `0.5px solid ${theme.common.color.lightGrey}`};
margin-bottom: 9px;
`;
Dmitry
это сарказм
Sergey
Будет хуже
Dmitry
const styles = StyleSheet.create({
wrapper: {
width: '100%',
paddingVertical: 8,
paddingHorizontal: 12,
marginBottom: 9
}
});
const wrapperStyles = [styles.wrapper, {
backgroundColor: theme.common.color.white,
borderColor: theme.common.color.lightGrey,
borderWidth: 0.5,
}]
Sergey
А где сам компонент?
Sergey
Здорово ты его убрал
Dmitry
<View style={wrapperStyles} />
Sherzod
Все привет
Sergey
у вас типизации нету, так понимаю на проекте ?
У меня нет. Но ты спросил, как еще можно, я дал варианты.
Sherzod
почему-то не работает scrollToEnd
Sherzod
this.flatList.scrollToEnd();
Sherzod
у FlatList
чей ты
так на словах трудно понять в чем ты накасячил
Sherzod
<FlatList
ref={elm => this.flatList = elm}
data={messages}
renderItem={this._renderMessageItem}
extraData={this.state}
keyExtractor={(item, index) => index.toString()}
/>
Sherzod
sendMessage() {
const {messages, text} = this.state;
messages.push({
message: text,
isOwner: true,
})
this.setState({messages, text:null});
setTimeout(() => {
if (this.flatList !== null) {
this.flatList.scrollToEnd();
}
}, 200)
}
Sherzod
вот сама функция простая
Alexsandr
Alexsandr
а все вижу
Alexsandr
Alexsandr
у тебя контекст потерялся
Alexsandr
сделай из sendMessage = () => {
Alexsandr
стрелку
Alexsandr
this.setState({messages, text:null}, () => {
setTimeout(() => {
if (this.flatList !== null) {
this.flatList.scrollToEnd();
}
}, 200)
});
Alexsandr
и вот так сделай, чтобы у тебя стейт точно обновился
Sherzod
и вот так сделай, чтобы у тебя стейт точно обновился
так тоже пробовал, сейчас еще раз попробовал
Sherzod
без изминений
чей ты
вот сама функция простая
я так понимаю ты делаешь чат ?
и занимаешь такой фичей как прокрурка в конец при добавлении ?
Sherzod
Sherzod
this.setState({messages, text:null}, () => {
setTimeout(() => {
if (this.flatList !== null) {
this.flatList.scrollToEnd();
}
}, 200)
});
sendMessage = () => {
const {messages, text} = this.state;
messages.push({
message: text,
isOwner: true,
})
this.setState({messages, text:null}, () => {
setTimeout(() => {
if (this.flatList !== null) {
this.flatList.scrollToEnd();
}
}, 200)
});
}
чей ты
можешь избавиться от это лабуды
чей ты
sendMessage = () => {
const {messages, text} = this.state;
messages.push({
message: text,
isOwner: true,
})
this.setState({messages, text:null}, () => {
setTimeout(() => {
if (this.flatList !== null) {
this.flatList.scrollToEnd();
}
}, 200)
});
}
для чатов инвертированные списки подходят
https://facebook.github.io/react-native/docs/flatlist#inverted
Sherzod
чей ты
сам недавно узнал
Sherzod
для чатов инвертированные списки подходят
https://facebook.github.io/react-native/docs/flatlist#inverted
надо походу только reverse сделать массив
чей ты
да , в начале списка новые сообщения
Sergey
<View style={wrapperStyles} />
И читай потом в коде бесконечные View. Конечно можно в функции вынести, так и у SC есть объектный режим для твоего примера.
Sherzod
для чатов инвертированные списки подходят
https://facebook.github.io/react-native/docs/flatlist#inverted
Попробовал, добавляю в начало массива новый элемен unshift ом, он не прокручивается
Andrey
Попробовал, добавляю в начало массива новый элемен unshift ом, он не прокручивается
setState отрабатывает?
Sherzod
почему на null проверка идет? может занулил где?
нет, просто проверку поставил. console.log выдает что приходит все нормально
Dmitry
у меня scrollToEnd тоже не работает
Sherzod
можно так this.flatlist.scrollToIndex({ index: data.length-1 });
как раз сейчас, этот способ пробовал
Dmitry
Dmitry
чей ты
Попробовал, добавляю в начало массива новый элемен unshift ом, он не прокручивается
unsfift мутирует массив!
а FlatList это pure компонет
чей ты
setState(({ messages }) => ({messages: [newMessage, ...messages]}));
чей ты
рабочий пример
Makar
Nick
Если вообще выкачан
Makar
Что это значит?
Nick
Там у rn3 в доках указано что надо сделать
Makar
Ок
invariance
Господа, кто работал с PanResponder, почему то у меня после того как я передвину компонент, пытаюсь двигать второй раз - и он стартует с нулевых координат, а не с последних. Как это пофиксить?
Алексей💀
invariance
Ага, нашел где проблема
Artem
Ребят, нужен календарь, в котором можно было бы блокировать для выбора определенные дни и оставлять доступными например только вторники. Может кто использовал что-то подобное?