• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

138
Views
¿Cómo mantener la posición en ScrollView? reaccionar nativo

Quiero hacer ScrollView horizontal con 6 elementos TouchableOpacity; onPress cambiarían algún estado redux, y luego, cambiarían su propio estilo, ¿cómo forzar la lista MANTENER la posición en la reproducción? Ahora, si presiono después de desplazarme un poco, vuelve al principio

Quiero que esto se parezca a la elección de categoría en Play Market, pero sin centrar, solo necesita mantener la posición

aqui como se ve

 <ScrollView style={{ height: 50, width: '100%' }} contentContainerStyle={{ alignItems: 'center' }} horizontal={true} showsHorizontalScrollIndicator={false} > <TouchableOpacity style={categoryNumber === 0 ? styles.BtnActive : styles.Btn} onPress={() => dispatch(setCategoryNumber(0))}> <Text style={categoryNumber === 0 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 1</Text> </TouchableOpacity> <TouchableOpacity style={categoryNumber === 1 ? styles.BtnActive : styles.Btn} onPress={() => dispatch(setCategoryNumber(1))}> <Text style={categoryNumber === 1 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 2</Text> </TouchableOpacity> <TouchableOpacity style={categoryNumber === 2 ? styles.BtnActive : styles.Btn} onPress={() => dispatch(setCategoryNumber(2))}> <Text style={categoryNumber === 2 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 3</Text> </TouchableOpacity> <TouchableOpacity style={categoryNumber === 3 ? styles.BtnActive : styles.Btn} onPress={() => dispatch(setCategoryNumber(3))}> <Text style={categoryNumber === 3 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 4</Text> </TouchableOpacity> <TouchableOpacity style={categoryNumber === 4 ? styles.BtnActive : styles.Btn} onPress={() => {dispatch(setCategoryNumber(4))}}> <Text style={categoryNumber === 4 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 5</Text> </TouchableOpacity> <TouchableOpacity style={categoryNumber === 5 ? styles.BtnActive : styles.Btn} onPress={() => {dispatch(setCategoryNumber(5))}}> <Text style={categoryNumber === 5 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 6</Text> </TouchableOpacity> </ScrollView> const styles = StyleSheet.create({ Btn: { height: 40, backgroundColor: '#F1F5FE', paddingHorizontal: 10, justifyContent: 'center', borderRadius: 12, marginHorizontal: 4 }, BtnText: { color: '#000' }, BtnActive: { height: 40, backgroundColor: '#336FEE', paddingHorizontal: 10, justifyContent: 'center', borderRadius: 12, marginHorizontal: 4 }, BtnTextActive: { color: '#fff' } })
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Agregue claves únicas a los componentes de ScrollView

Esta es la razón por la que necesita llaves

Ejemplo:

 <TouchableOpacity key={'some-unique-id'} style={categoryNumber === 0 ? styles.BtnActive : styles.Btn} onPress={() => dispatch(setCategoryNumber(0))}> <Text style={categoryNumber === 0 ? styles.BtnTextActive : styles.BtnText}> ITEM_NAME 1 </Text> </TouchableOpacity>

Sugerencia: intente usar bucles en lugar de escribir cosas en ScrollView

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error