在 android 中反应本机 onPress 在库中不工作

Question

这是开始组件，在渲染函数下面 onPress 函数工作正常。

import React, { useState, useEffect, useRef } from "react"
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  TextInput,
  KeyboardAvoidingView,
  Keyboard,
  Button,
} from "react-native"

import BouncyCheckbox from "react-native-bouncy-checkbox"
import { SafeAreaView } from "react-native-safe-area-context"
import { ScrollView, TouchableWithoutFeedback } from "react-native-gesture-handler"
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"
import RNPickerSelect from "react-native-picker-select"
import Animated from "react-native-reanimated"
import BottomSheet from "reanimated-bottom-sheet"
import EventBannerSheet from "./event-banner"

export const UserInfoPhone: React.FC = () => {
  const userNumberFormRef = useRef<TextInput>()
  const userNumberNextFormRef = useRef<TextInput>()
  const userPhoneNumberFormRef = useRef<TextInput>()

  const focusToNextForm = (nextForm: any) => {
    nextForm.current.focus()
  }

  const EssentialAgreementContainer = ({ text }) => {
    return (
      <View style={styles.essentialAgreementContainer}>
        <View style={styles.essentialSmallBox}>
          <Text style={styles.essentialAgreementText}>[필수] {text}</Text>
          <TouchableOpacity style={styles.okButton}>
            <Text style={styles.okButtonTitle}>보기</Text>
          </TouchableOpacity>
        </View>
        <BouncyCheckbox
          size={17}
          fillColor="lightgrey"
          unfillColor="lightgrey"
          iconStyle={{ borderColor: "lightgrey" }}
          textStyle={{ fontFamily: "JosefinSans-Regular" }}
        />
      </View>
    )
  }

  return (
    <>
      <SafeAreaView style={styles.container}>
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <KeyboardAwareScrollView>
            <Image source={require("./back.png")} style={styles.backButton} />
            <View style={styles.viewTitle}>
              <Text style={styles.title}>휴대폰으로</Text>
              <Text style={styles.title}>간편 본인인증하세요.</Text>
            </View>
            <View style={styles.subTitleContainer}>
              <Text style={styles.subTitle}>나중에 할게요</Text>
              <TouchableOpacity style={styles.okButton}>
                <Text style={styles.okButtonTitle}>확인</Text>
              </TouchableOpacity>
            </View>
            <View style={[styles.agreementContainer, styles.shadowProps]}>
              <View style={styles.conditionContainer}>
                <Text style={styles.agreementTitle}>본인확인 서비스에 대해 모두 동의하기</Text>
                <BouncyCheckbox
                  size={17}
                  fillColor="lightgrey"
                  unfillColor="lightgrey"
                  iconStyle={{ borderColor: "lightgrey" }}
                  textStyle={{ fontFamily: "JosefinSans-Regular" }}
                />
              </View>
              <View style={styles.contour}></View>
              <EssentialAgreementContainer text="서비스 이용약관 동의" />
              <EssentialAgreementContainer text="통신사 이용약관 동의" />
              <EssentialAgreementContainer text="개인 정보 수집 및 이용 동의" />
              <EssentialAgreementContainer text="개인 제어보 제공/위탁 동의" />
              <EssentialAgreementContainer text="고유식별 정보 처리" />
            </View>
            <View style={styles.infoForms}>
              <View style={styles.nameFormContainer}>
                <Text style={styles.userInfo}>성명</Text>
                <TextInput
                  style={styles.nameForm}
                  onSubmitEditing={() => {
                    focusToNextForm(userNumberFormRef)
                  }}
                />
              </View>
              <View style={styles.personNumberFormContainer}>
                <Text style={styles.userInfo}>주민등록번호 (외국인등록번호)</Text>
                <View style={styles.userNumberFormContainer}>
                  <TextInput
                    style={styles.userNumberForm}
                    maxLength={6}
                    placeholder="960101"
                    onSubmitEditing={() => {
                      focusToNextForm(userNumberNextFormRef)
                    }}
                    ref={userNumberFormRef}
                  />
                  <Text style={{ fontSize: 20 }}>-</Text>
                  <TextInput
                    style={styles.userSecondNumberForm}
                    maxLength={1}
                    ref={userNumberNextFormRef}
                    onSubmitEditing={() => {
                      focusToNextForm(userPhoneNumberFormRef)
                    }}
                  />
                </View>
              </View>
              <View style={styles.phoneFormContainer}>
                <Text style={styles.userInfo}>휴대폰번호</Text>
                <View style={styles.phoneForms}>
                  <View style={styles.telecome}>
                    <RNPickerSelect
                      style={{ inputAndroid: { color: "black", padding: 0, height: 20 } }}
                      useNativeAndroidPickerStyle={false}
                      onValueChange={(value) => console.log(value)}
                      placeholder={{ label: "통신사" }}
                      items={[
                        { label: "SKT", value: "SKT" },
                        { label: "KT", value: "KT" },
                        { label: "LG U+", value: "LG U+" },
                        { label: "SKT알뜰폰", value: "SKT알뜰폰" },
                        { label: "KT알뜰폰", value: "KT알뜰폰" },
                        { label: "LG U+알뜰폰", value: "LG U+알뜰폰" },
                      ]}
                    />
                  </View>
                  <TextInput
                    style={styles.phoneForm}
                    placeholder="010-1234-5678"
                    ref={userPhoneNumberFormRef}
                  />
                </View>
              </View>
            </View>
            <TouchableOpacity style={styles.certificationButton}>
              <Text style={styles.certificationText}>인증하기</Text>
            </TouchableOpacity>
          </KeyboardAwareScrollView>
        </TouchableWithoutFeedback>
      </SafeAreaView>
      <EventBannerSheet />
    </>
  )
}

这是 EventBannerSheet 组件，我得到了这个 BottomSheet 库并编写了它，但是 onPress 函数在这里不起作用。 另外我在使用 Checkbox 库之前就这样做了，但是 onValueChange 在 android.

中也不起作用

import React, { useRef } from "react"
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native"
import BottomSheet from "reanimated-bottom-sheet"

const EventBannerSheet: React.FC = () => {
  const sheetRef = useRef(null)

  const consoleHello = () => {
    console.log("helloooooooo!!!!")
  }

  const renderContent = () => (
    <View style={styles.bottomSheet}>
      <View style={styles.sheetTextContainer}>
        <Text
          style={styles.sheetText}
          onPress={() => {
            consoleHello()
          }}
        >
          EVENT BANNER
        </Text>
        <Text style={styles.sheetText}>IMG</Text>
      </View>
      <View style={styles.sheetCloseContainer}>
        <TouchableOpacity
          onPress={() => {
            console.log("helloMaster123")
          }}
        >
          <Text style={{ color: "blue" }}>오늘 하루 보지않기</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => sheetRef.current.snapTo(2)}>
          <Text>닫기</Text>
        </TouchableOpacity>
      </View>
    </View>
  )

  return (
    <>
      <BottomSheet
        initialSnap={1}
        ref={sheetRef}
        snapPoints={[450, 350, 0]}
        borderRadius={10}
        renderContent={renderContent}
      />
    </>
  )
}

这是 EventBannerSheet 的样式表


const styles = StyleSheet.create({
  bottomSheet: {
    backgroundColor: "white",
    padding: 25,
    height: 440,
  },

  sheetTextContainer: {
    height: 270,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#d3d3d3",
    borderRadius: 10,
  },

  sheetText: {
    fontSize: 30,
    color: "white",
  },

  sheetCloseContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 20,
  },
})

Answer 1

    <View style={styles.bottomSheet}>
        <View style={styles.sheetTextContainer}>
            <TouchableOpacity
                style={styles.sheetText}
                onPress={() => {
                    consoleHello()
                }}
            >
                <Text style={{ color: "black" }}>EVENT BANNER</Text>
            </TouchableOpacity>
            <Text style={styles.sheetText}>IMG</Text>
        </View>
        <View style={styles.sheetCloseContainer}>
            <TouchableOpacity
                onPress={() => {
                    console.log("helloMaster123")
                }}>
                <Text style={{ color: "blue" }}>오늘 하루 보지않기</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => sheetRef.current.snapTo(2)}>
                <Text>닫기</Text>
            </TouchableOpacity>
        </View>
    </View>

请尝试上面的代码。我已经测试了代码，可触摸的不透明度工作正常，没有任何问题。我为 EVENT BANNER 文本添加了文本颜色只是为了测试。如果您需要任何其他帮助，请告诉我。

Answer 2

这是我所做的配置，它可以在 iOS 和 Android 上使用按钮和水平拖动滑块

<BottomSheet
      initialSnap={1}
      ref={sheetRef}
      snapPoints={[450, 350, 0]}
      borderRadius={10}
      renderContent={renderContent}
      enabledContentGestureInteraction={false}
      enabledInnerScrolling={false}
      enabledContentTapInteraction={false}
    />

我附加了三个属性，所以我解决了这个问题。

视图内的按钮使用 RN 的 TouchableOpacity iOS 和 react-native-gesture-handler 的 TouchableOpacity Android

在 android 中反应本机 onPress 在库中不工作

react native onPress not working in library in android

react-native

onpress