Comments (5)
same here, ended up using scrollToOffset
or you can insert a dummy View component right before stickyHeader and use that index to scrollto.
from react-native.
Missing Reproducible Example | |
---|---|
ℹ️ | We could not detect a reproducible example in your issue report. Please provide either:
|
from react-native.
Newer Version of React Native is Available! | |
---|---|
ℹ️ | You are on a supported minor version, but it looks like there's a newer patch available - 0.73.6. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases. |
from react-native.
UPDATE: tried latest version 0.73.6, and the issue still persists.
from react-native.
Descripción
Hola,
Estamos intentando actualizar nuestra aplicación de React Native 0.68 a la última versión actual de 0.73.4.
Hemos encontrado un error con FlatList, que no fue un problema en la versión 0.68 de RN.
Si tenemos elementos en la lista plana, que está definida en su
stickyHeaderIndices
, entonces no podremos usar scrollToIndex para desplazarnos a ese elemento fijo. En su lugar, lo llevará de regreso a la parte superior de FlatList. Lo cual no es un problema en RN 0.68.Para demostrar mejor este error, he creado una aplicación sencilla. El siguiente es el archivo App.js. No se necesitan otras dependencias.
Como puede ver en el código, cada elemento de la lista plana es un campo de entrada de texto, siempre que el usuario se centre en cualquiera de los campos de entrada. Nos gustaría que ese campo de texto se desplace a la posición superior de la pantalla, para ahorrar espacio en la mitad inferior de la pantalla para mostrar el teclado.
Para cualquier elemento que no esté en
stickyHeaderIndices
, scrollToIndex funciona como se esperaba. Pero para cualquier elemento que esté enstickyHeaderIndices
, lo desplazará a la parte superior de la lista, en lugar de desplazarlo a la posición correcta.Por razones de seguridad, la computadora portátil de mi empresa no me permite cargar ningún video en repositorios públicos de GitHub. Pero puedes tomar el siguiente código y reproducir fácilmente este problema.
import { StatusBar } from 'expo-status-bar'; import { FlatList, StyleSheet, Text, TextInput, View } from 'react-native'; import * as React from "react"; export default function App() { const flatListRef = React.useRef(null) const stickyList = [3,5]; const DATA = []; for (let index = 0; index < 10; index++) { const element = { id: index, title: stickyList.includes(index) ? `${index} I am sticky Item` : `${index} Item` }; DATA.push(element); }; const handleFocus = (event, title) => { console.log(title); const index = title.match(/\d+/)[0]; console.log(index); setTimeout(() => { flatListRef.current?.scrollToIndex({ viewPosition: 0, index }) }) } const Item = (item) => { console.log(item) return( <View style={styles.item}> <Text style={styles.title}>{item.title}</Text> <TextInput onFocus={e => handleFocus(e, item.title)} style={{ height: 40, borderColor: 'gray', borderWidth: 1, }} /> </View> ); }; const renderItem = ({item}) => <Item title={item.title} /> return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <FlatList ref={flatListRef} renderItem={renderItem} data={DATA} keyExtractor={item => item.id} stickyHeaderIndices={stickyList} /> <StatusBar style="auto" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, item: { backgroundColor: '#f9c2ff', padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, }, });
pasos para reproducir
Utilice el código proporcionado en la descripción. Iniciar aplicación. Desplácese por la lista. Toque la entrada de texto del elemento fijo. Desplácese hacia la parte superior de la lista.
Reaccionar versión nativa
0.73.4
Plataformas afectadas
Tiempo de ejecución: Android, Tiempo de ejecución: iOS
Salida de
npx react-native info
info Fetching system and libraries information... System: OS: macOS 13.6.4 CPU: (8) arm64 Apple M1 Memory: 87.02 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.17.1 path: ~/.nodenv/versions/18.17.1/bin/node Yarn: version: 1.22.19 path: ~/.nodenv/versions/18.17.1/bin/yarn npm: version: 9.6.7 path: ~/.nodenv/versions/18.17.1/bin/npm Watchman: version: 2023.02.13.00 path: /Users/menglaiq/homebrew/bin/watchman Managers: CocoaPods: version: 1.11.3 path: /Users/menglaiq/.rbenv/shims/pod SDKs: iOS SDK: Platforms: - DriverKit 22.1 - iOS 16.1 - macOS 13.0 - tvOS 16.1 - watchOS 9.1 Android SDK: API Levels: - "25" - "28" - "30" - "31" - "32" - "33" - "34" - "34" Build Tools: - 28.0.3 - 29.0.2 - 30.0.0 - 30.0.2 - 30.0.3 - 31.0.0 - 32.0.0 - 32.1.0 - 33.0.1 - 34.0.0 System Images: - android-28 | Google APIs ARM 64 v8a - android-28 | Google APIs Intel x86 Atom_64 - android-28 | Google ARM64-V8a Play ARM 64 v8a - android-29 | Google Play ARM 64 v8a - android-32 | Google APIs ARM 64 v8a - android-32 | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: Not Found Xcode: version: 14.1/14B47b path: /usr/bin/xcodebuild Languages: Java: version: 17.0.2 path: /usr/bin/javac Ruby: version: 3.0.1 path: /Users/menglaiq/.rbenv/shims/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.73.6 wanted: 0.73.6 react-native-macos: Not Found npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: Not found newArchEnabled: Not found iOS: hermesEnabled: Not found newArchEnabled: Not found
Stacktrace o registros
No crash or anything
reproductor
código en la descripción
Capturas de pantalla y vídeos
Por razones de seguridad, la computadora portátil de mi empresa no me permite cargar ningún video en repositorios públicos de GitHub. Pero puedes tomar el siguiente código y reproducir fácilmente este problema.
from react-native.
Related Issues (20)
- npx [email protected] init cammnd installs the lattest version of react-native HOT 5
- android onScrollEndDrag throttled by scrollEventThrottle HOT 1
- [iOS] VoiceOver reads the placeholder in TextInput HOT 3
- List<ReactPackage> packages = new PackageList(this).getPackages(); [ANDROID] HOT 3
- Experimental debugger does not work on 0.74 with bridgeless on iOS
- [0.74.0] stress reloading leads to broken state on android bridgeless
- onPress work one time only HOT 3
- TypeError: Cannot create property 'lastUpdateCheck' on string 'lastUpdateCheck 1713956001921 nodeLinker node-modules ces nodeLinker node-modules' HOT 4
- Crash - malloc: Heap corruption detected, free list is damaged HOT 2
- [0.74.0] AppState module has an error on android HOT 11
- Emiting Events from Android in New Arch + Bridgeless + interop layer HOT 4
- react native reanimated erro in 0.74 HOT 4
- [0.74] AppRegistry.registerComponent cannot show in a new ReactRooView HOT 2
- use turboModule in app not as a libray in node_modules folder work fail, js file can not find the turboModule HOT 2
- libgojni.so MTE crash (memory unsafe code) HOT 4
- couldn't find DSO to load: libhermes.so SoSource 0: com.facebook.soloader.ApkSoSource HOT 3
- App State 0.74 in DEVELOPMENT HOT 3
- I compare 0.72.5 and 0.74.0 react native android app size,0.74.0 is 50MB,And 0.72.5 is 21.7 MB.How to reduce 0.74.0 android app size? HOT 10
- WebSocket on android works slower than on ios HOT 1
- @react-native/typescript-config causes type check error for dependencies
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native.