>source

import React from 'react';
import { FlatList, StyleSheet, Text, View , ScrollView ,TouchableHighlight,TouchableOpacity,Touchable} from 'react-native';
import { useState } from 'react';
function HomeContent({navigation}){
    const [Level, setLevel] = useState([
        {name:'ม.3\nปี59', key:1},
        {name:'ม.3\nปี60', key:2},
        {name:'ม.3\nปี61', key:3},
        {name:'ม.3\nปี62', key:4},
        {name:'ม.3\nปี63', key:5},
        {name:'ม.6\nปี59', key:6},
        {name:'ม.6\nปี60', key:7},
        {name:'ม.6\nปี61', key:8},
        {name:'ม.6\nปี62', key:9},
        {name:'ม.6\nปี63', key:10},
    ])
    const pressHandler = () => {
        var i;
        for (i = 1; i < 11; i++) {
            navigation.navigate(`Exam${i}`) /*exam.{key_page}*/ 
        }
    }
    return(
        <View style = {styles.mainContent}>
            <ScrollView showsVerticalScrollIndicator ={false}>
            <FlatList 
                data = {Level}
                renderItem = {({item}) => (
                    <TouchableOpacity onPress= {pressHandler}>
                    <View style = {styles.mainContentBox} >
                        <Text style={styles.mainContentBoxText}>{item.name}</Text>
                    </View>    
                    
                    </TouchableOpacity>
                )}
                numColumns = {2}
            />
            </ScrollView>
        </View>
    )
}

시험 페이지가 많이 있습니다 (시험 [1-10]) 다른 페이지로 이동하는 방법 for loop the number를 사용하려고하는데 1-10 페이지로 이동하지 못합니다.

이게 뻔하면 미안해

  • 답변 # 1

    이 방법으로 시도

    const pressHandler = (item) => {
       navigation.navigate(`Exam${item.key}`);
    }
    
    <TouchableOpacity onPress={() => { pressHandler(item)} >
      <View style = {styles.mainContentBox} >
          <Text style={styles.mainContentBoxText}>{item.name}</Text>
      </View>           
    </TouchableOpacity>
    
    

  • 답변 # 2

    색인 소품 가져 오기 renderItem 및 탐색

    renderItem = {({item,index}) => (
         <TouchableOpacity onPress= {() => {
           const pageNumber = index+1;
          navigation.navigate(`Exam${pageNumber}`) /*exam.{key_page}*/ 
         }}>
        .....
    
    

관련 자료

  • 이전 javascript - js - referenceerror : 가져 오기가 정의되지 않았습니다
  • 다음 javascript - Nav Bar, React-Router의 Route에서 Param 가져 오기