Reactnative 如何在react native 中将选定的自定义复选框数据发送到下一页

在这里，我创建了切换自定义复选框，这些复选框在FlatList以内以名称呈现.

现在选中了哪些复选框，我想使用导航将这些名称发送到下一个屏幕.

那么我该如何实现这个功能呢？如果有人知道的话，请帮助我.

/**Code For custom checkbox:**/

import React from "react";
import {
  TouchableOpacity,
  Image,
  View,
  SafeAreaView,
  Text,
} from "react-native";
import { useState } from "react";
import IconAntDesign from "react-native-vector-icons/AntDesign";

export function CheckBoxCustom() {
  const [count, setCount] = useState(0);
  return (
    <SafeAreaView>
      <TouchableOpacity
        style={{
          backgroundColor: "white",
          width: 20,
          height: 20,
          borderWidth: 2,
          borderColor: "#ddd",
        }}
        onPress={() => setCount(!count)}
      >
        {count ? (
          <IconAntDesign name="check" size={15} color={"black"} />
        ) : null}
      </TouchableOpacity>
    </SafeAreaView>
  );
}

/**Code for FlatList:**/
import React, {useState} from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  Image,
  StyleSheet,
  FlatList,
  Dimensions,
  useWindowDimensions,
  ScrollView,
  Button,
} from 'react-native';
import Header from '../CustomComponents/RestaurentUI/Header';
import {CheckBoxCustom} from '../CustomComponents/RestaurentUI/Checkbox';
import {TextInput} from 'react-native-gesture-handler';
import {TabView, SceneMap, TabBar} from 'react-native-tab-view';
import {NavigationContainer, useNavigation} from '@react-navigation/native';
import GetCheckBoxData from './GetCheckBoxData';
const data = [
  {
    name: 'Lumlère brûlée',
    status: 'Problems',
  },
  {
    name: 'Aucune eau chaude',
    status: 'Problems',
  },
  {
    name: 'Lumlère brûlée',
    status: 'Problems',
  },
  {
    name: 'Service de ménage',
    status: 'Problems',
  },
  {
    name: 'AC non-fonctionnel',
    status: 'Problems',
  },
  {
    name: 'WIFI non-fonctionnel',
    status: 'Problems',
  },
  {
    name: 'Four non-fonctionnel',
    status: 'Problems',
  },
];
const renderItem = ({item, index}) => {
  return (
    <View>
      <View style={{flexDirection: 'row'}}>
        <CheckBoxCustom />
        <Text style={{marginLeft: 10}}>{item.name} </Text>
      </View>
    </View>
  );
};
const separator = () => {
  return (
    <View
      style={{
        height: 1,
        backgroundColor: '#f1f1f1',
        marginBottom: 12,
        marginTop: 12,
      }}
    />
  );
};
const FirstRoute = () => (
  <FlatList
    style={{marginTop: 20}}
    data={data}
    keyExtractor={(e, i) => i.toString()}
    renderItem={renderItem}
    ItemSeparatorComponent={separator}
  />
);

const SecondRoute = () => (
  <View style={[styles.scene, {backgroundColor: 'white'}]} />
);

const initialLayout = {width: Dimensions.get('window').width};

const renderScene = SceneMap({
  first: FirstRoute,
  second: SecondRoute,
});

const ReportScreen = ({navigation}) => {
  const nav = useNavigation();
  const layout = useWindowDimensions();
  const [index, setIndex] = useState(0);
  const [routes] = useState([
    {key: 'first', title: 'Problemes'},
    {key: 'second', title: 'Besoins complémentaitaires'},
  ]);

  const goToScreen = () => {
    navigation.navigate('GetCheckBoxData', {title: 'Hii all'});
  };
  const [checked, setChecked] = useState({});

  const checkToggle = id => {
    setChecked(checked => ({
      ...checked,
      [id]: !checked[id],
    }));
  };
  return (
    <SafeAreaView style={styles.safearea}>
      <Header title="Report" />
      <ScrollView showsVerticalScrollIndicator={false} bounces={false}>
        <View style={{flexDirection: 'row', marginTop: 20}}>
          <View style={{flex: 1, height: 1, backgroundColor: '#ccc'}} />
        </View>
        <View style={styles.cardView}>
          <View style={styles.subView}>
            <Image
              style={styles.image}
              source={require('../Assets/UIPracticeImage/H1.jpg')}
            />
            <View style={styles.internalSubView}>
              <View style={styles.nameView}>
                <Text style={styles.nameText}>Pine Hill Green Caban</Text>
              </View>
              <View style={styles.dateView}>
                <Text style={styles.dateText}>May 22-27</Text>
              </View>
            </View>
          </View>
        </View>
        <View style={{flexDirection: 'row'}}>
          <View style={{flex: 1, height: 1, backgroundColor: '#ccc'}} />
        </View>
        <View
          style={{
            // backgroundColor: 'lime',
            flex: 1,
            height: 385,
            width: '100%',
          }}>
          <TabView
            navigationState={{index, routes}}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={initialLayout}
            style={styles.container}
           
            renderTabBar={props => (
              <TabBar
                tabStyle={{alignItems: 'flex-start', width: 'auto'}}
                {...props}
                renderLabel={({route, color}) => (
                  <Text style={{color: 'black'}}>{route.title}</Text>
                )}
                style={{backgroundColor: 'white'}}
              />
            )}
          />
        </View>

        <Button title="Click me" onPress={goToScreen} />
      </ScrollView>
    </SafeAreaView>
  );
};

export default ReportScreen;
const styles = StyleSheet.create({
  safearea: {
    marginHorizontal: 20,
  },
  cardView: {
    borderRadius: 10,
    marginVertical: 10,
    paddingVertical: 8,
  },
  subView: {
    flexDirection: 'row',
  },
  image: {
    height: 80,
    width: 110,
    borderRadius: 10,
  },
  internalSubView: {
    justifyContent: 'space-between',
    flex: 1,
  },
  nameView: {
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 10,
  },
  nameText: {
    fontWeight: 'bold',
    width: '45%',
    fontSize: 15,
  },
  dateView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 10,
    justifyContent: 'space-between',
  },
  dateText: {
    width: 80,
  },
  listTab: {
    flexDirection: 'row',
    marginBottom: 20,
    marginTop: 20,
  },
  btnTab: {
    borderWidth: 3,
    borderColor: 'white',
    flexDirection: 'row',
    marginRight: 10,
  },
  btnTabActive: {
    borderWidth: 3,
    borderBottomColor: '#fdd83d',
    borderColor: 'white',
  },
  scheduleButton: {
    backgroundColor: '#fdd83d',
    alignItems: 'center',
    paddingVertical: 15,
    borderRadius: 10,
    marginTop: 15,
  },
  container: {
    marginTop: 20,
  },
  scene: {
    flex: 1,
  },
});
[![UI image][1]][1]


  [1]: https://i.stack.imgur.com/AuLT8.png