reactjs - 无法重用我的组件，它只显示 1 次

Question

出于某种原因，当我第二次调用我的组件 TouchSelect 时，它没有显示，因此我无法重用它。我重复使用了组件 之前已经发生过很多次了，所以我对此感到非常困惑。 看来问题与 FlatList 相关，因为如果我做同样的事情但使用映射函数，一切都会完美，我可以毫无问题地重用我的组件。

我还注意到，如果我在 TouchSelect 组件下方插入文本，我就看不到它，如果我将文本放置在该组件之前，我就可以毫无问题地看到它。 这是存储库:https://github.com/Themrpie/surveyapp

export default function App() {

  

  return (
    <SafeAreaView style={styles.container}>
      <RadioSelect />
      <ChipSelect/>
      <Stars/>      
      <TouchSelect question='How likely are you to recommend our company?' />
      <TouchSelect question='THIS DOESNT SHOW' />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    
    
  },
  texto: {
    justifyContent:'center'
  }
});

以防万一，我还发布了完整的代码组件:

import { FlatList, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React, { useState } from 'react'
import { MD2Colors, Surface } from 'react-native-paper'

const options = [
    {
        id: 1,
        option: 1
    },
    {
        id: 2,
        option: 2
    },
    {
        id: 3,
        option: 3
    },
    {
        id: 4,
        option: 4
    },
    {
        id: 5,
        option: 5
    },
    {
        id: 6,
        option: 6
    },
    {
        id: 7,
        option: 7
    }, 
    {
        id: 8,
        option: 8
    },
    {
        id: 9,
        option: 9
    },
    {
        id: 10,
        option: 10
    },
    
   
]

const TouchSelect = ({question}) => {
    const [selected, setSelected] = useState()

  return (
      <Surface style={styles.container}>    
        <Text style={styles.question} >{question}</Text>      
         <FlatList data={options} keyExtractor={(item) => item.id} horizontal
            renderItem={({item}) =>(
                <TouchableOpacity style={ selected === item.id? [{...styles.option}, {backgroundColor:MD2Colors.lightGreen600}]: styles.option} 
                    onPress={() => setSelected(item.id)}  >
                    <Text style={styles.texto} >{item.option}</Text>
                </TouchableOpacity> )
            }
            />       
     </Surface>
  )
}

export default TouchSelect

const styles = StyleSheet.create({
    container: {
        marginVertical: 20,
        backgroundColor:'white',
        alignItems:'center'

    },
    option: {
        marginHorizontal:2,
        backgroundColor: MD2Colors.amberA200,
        padding: 8,        
        borderRadius: 100,        
        
    },
    question: {
        fontSize: 20,
        fontWeight: 'bold',
        marginBottom: 15,
        textAlign: 'center',
        
    },
    texto: {
        fontSize: 20,
        fontWeight: 'bold',
        textAlign:'center',
        
        
        
    }

})

如果有人能帮助我解决这个问题，我将不胜感激。

Answer 1

将您的 App 组件包装在 ScrollView 中。

import { ScrollView } from 'react-native';  
export default function App() {

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView> // <---- Try to add this
        <RadioSelect />
        <ChipSelect/>
        <Stars/>      
        <TouchSelect question='How likely are you to recommend our company?' />
        <TouchSelect key={2} question='THIS DOESNT SHOW' />
      </ScrollView>
    </SafeAreaView>
  );
}