如何在 React Native 中将项目数据传递到模态

Question

我有一个列表数据，我想要 select 项显示带有详细数据的模式

const [isModal, setModal] = useState(false)
const [idBasic, setIdBasic] = useState()

  const showModalBasic = (id) => {
    setModal(true), setIdBasic(id)
  }

  const [data, setData] = useState([
    {
      id: "BIKD31",
      name: "BI KD 3.1",
      desc:
        "Mencermati gagasan pokok dan gagasan pendukung yang diperoleh dari teks lisan, tulis, atau visual;",
    },
    {
      id: "BIKD41",
      name: "BI KD 4.1",
      desc:
        "Mencermati gagasan pokok dan gagasan pendukung yang diperoleh dari teks lisan, tulis, atau visual;",
    },
    {
      id: "BIKD32",
      name: "BI KD 3.2",
      desc:
        "Mencermati gagasan pokok dan gagasan pendukung yang diperoleh dari teks lisan, tulis, atau visual;",
    },
    {
      id: "BIKD42",
      name: "BI KD 4.2",
      desc:
        "Mencermati gagasan pokok dan gagasan pendukung yang diperoleh dari teks lisan, tulis, atau visual;",
    },
    {
      id: "BIKD33",
      name: "BI KD 3.3",
      desc:
        "Mencermati gagasan pokok dan gagasan pendukung yang diperoleh dari teks lisan, tulis, atau visual;",
    },
  ])

<FlatList
        data={data}
        renderItem={({ item }) => {
          if (!item) return null

          return (
            <TouchableOpacity
              style={{
                flexDirection: "row",
                justifyContent: "space-between",
                alignItems: "center",
                backgroundColor: theme.colors.surface,
                paddingHorizontal: 20,
                paddingVertical: 16,
                borderBottomWidth: 1,
                borderBottomColor: Colors.GREY_LIGHT,
              }}
              onPress={() => {
                showModalBasic(item.id)
              }}
              // onPress={handleChooseOrgTypePress(item.name)}
            >
              <View>
                <Text style={{ ...theme.fonts.bold }}>{item.name}</Text>
                <Text
                  style={{
                    ...theme.fonts.medium,
                    marginTop: 4,
                    fontSize: 12,
                    color: Colors.GRAY_DARK,
                  }}>
                  {`${item.desc.substr(0, 45)}...`}
                </Text>
              </View>
              <MaterialIcons
                name={item.id === isChoosen ? "check" : "chevron-right"}
                size={20}
                color={
                  item.id === isChoosen
                    ? theme.colors.primary
                    : Colors.GRAY_DARK
                }
                style={{ position: "absolute", right: 15, zIndex: 2 }}
              />
            </TouchableOpacity>
          )
        }}
        keyExtractor={(item) => item.id}
        showsVerticalScrollIndicator={false}
      />
      <ModalBasic visible={isModal} id={setIdBasic} />

这是一个用于呈现项目和功能的文件，用于显示模态，我混淆了如何将数据传递给组件“ModalBasic”，因为我不使用导航，如果我使用导航进行模态显示也许我可以，但是可以我用导航显示模态还是我必须用 useState 将数据传递给模态？

Answer 1

您传递的是 id state updater 函数而不是 id state。

您可以查看工作示例here

 <ModalBasic visible={isModal} id={idBasic} />

如何在 React Native 中将项目数据传递到模态

How to pass item data into modal in react native

modal-dialog

react-native