無法重用我的組件，它只顯示1次

出于某種原因，當我第二次呼叫我的組件 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',
        
        
        
    }

})

如果有人可以幫助我解決這個問題，我將不勝感激。

uj5u.com熱心網友回復：

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>
  );
}

標籤：反应反应式

上一篇：如何通過FlatList獲取當前索引？

下一篇：你能在ReactNativeDebugger中關閉黃色警告嗎？