onPress 事件在 reanimated-bottom-sheet 的 renderInner 中不起作用

Question

我在我的 React Native 项目中使用 reanimated-bottom-sheet

bottomSheet 用于测试的空页面内工作正常，但在主页面内 renderInner onPress 不工作。

Button inside renderHeader in the main.js 不工作，这个 button import 来自 nativeBase ，我使用 inputText inside renderInner 再次不起作用，但是当我将 200 设置为 input border 的大小并按下 border 时，我不知道为什么

这是我的 test.js 页面代码：

import React from 'react'
import {
  Image,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  View,
  TextInput,
Dimensions
} from 'react-native'
import { Button,Icon } from 'native-base';

import BottomSheet from 'reanimated-bottom-sheet'
const {width, height}= Dimensions.get('window')


export default class Example extends React.Component {
    state = {
        bottomSheet:{
            opened: false,
            height: height-80
        }
    }
  renderInner = () => (
    <View style={styles.panel}>
        
      <Text style={styles.panelTitle}>San Francisco Airport</Text>
      <Text style={styles.panelSubtitle}>
        International Airport - 40 miles away
      </Text>
      <Button transparent onPress={()=>{console.log("Press")}} style={styles.panelButton}>
        <Text style={styles.panelButtonTitle}>Directions</Text>
      </Button>
      <View style={styles.panelButton}>
        <Text style={styles.panelButtonTitle}>Search Nearby</Text>
      </View>
      <Image
        style={styles.photo}
        source={require('./../../assets/image/airport-photo.jpg')}
      />
    </View>
  )

  renderHeader = () => (
    <View style={styles.header}>
      <View style={styles.panelHeader}>
        <View style={styles.panelHandle} />
        <Button 
        transparent 
        onPress={this.searchSheetClose.bind(this)}
        style={{position:'absolute',top:-20,left:-5}}
        >
            <Icon 
            type='MaterialIcons' 
            name='close' 
            style={{color:'#9f9cb9',fontSize:14,backgroundColor:'#474077',width:30,height:30,borderRadius:25,padding:8}}
            />
        </Button>
      </View>
    </View>
  )

  bs = React.createRef()

  render() {
    return (
      <View style={styles.container}>

        <BottomSheet
          ref={this.bs}
          snapPoints={[ -20, this.state.bottomSheet.height, 50 ]}
          renderContent={this.renderInner}
          renderHeader={this.renderHeader}
          initialSnap={0}
        />
        
        <Button 
        transparent 
        onPress={this.searchSheetOpen.bind(this)}
        >
            <Icon 
            type='MaterialIcons' 
            name='search' 
            
            />
        </Button>
      </View>
    )
  }
  searchSheetOpen(){
    this.bs.current.snapTo(1)
    this.setState(prevState=>{
        return{
            bottomSheet:{
                ...prevState.bottomSheet,
                opened: true
            }
        }
    })
  }
  searchSheetClose(){
      console.log('ok')
    this.bs.current.snapTo(0)
    this.setState(prevState=>{
        return{
            bottomSheet:{
                ...prevState.bottomSheet,
                opened: false
            }
        }
    })
  }
}

const IMAGE_SIZE = 200

const styles = StyleSheet.create({

  container: {
    flex: 1,
    backgroundColor: '#161e2a',
  },
  box: {
    width: IMAGE_SIZE,
    height: IMAGE_SIZE,
  },
  panelContainer: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },
  panel: {
    height: height-80,
    padding: 20,
    backgroundColor: '#222e3e',

  },
  header: {
    backgroundColor: '#222e3e',
    shadowColor: '#000000',
    paddingTop: 25,
    borderTopLeftRadius: 25,
    borderTopRightRadius: 25,
  },
  panelHeader: {
    alignItems: 'center',
  },
  panelHandle: {
    width: 60,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#474077',
    marginBottom: 25,
  },
  panelTitle: {
    fontSize: 27,
    height: 35,
  },
  panelSubtitle: {
    fontSize: 14,
    color: 'gray',
    height: 30,
    marginBottom: 10,
  },
  panelButton: {
    padding: 20,
    borderRadius: 10,
    backgroundColor: '#318bfb',
    alignItems: 'center',
    marginVertical: 10,
  },
  panelButtonTitle: {
    fontSize: 17,
    fontWeight: 'bold',
    color: 'white',
  },
  photo: {
    width: '100%',
    height: 225,
    marginTop: 30,
  },
  map: {
    height: '100%',
    width: '100%',
  },
})

和main.js页面：

import React, { Component } from 'react';
import changeNavigationBarColor,{ showNavigationBar } from 'react-native-navigation-bar-color';
import { Container, Root, Content, Text, Footer, View, Button, Icon,Badge, Item,Input } from 'native-base';
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';
import { Dimensions,Image } from 'react-native'

import { main, discoverPage, HeaderStyle, searchSheet } from './../../assets/style'
import HeaderOfPage from './../../components/Header'
import FooterTabOfPage from './../../components/FooterTab'
import air from './../../assets/image/airport-photo.jpg'

const {width, height}= Dimensions.get('window')

export default class Splash extends Component {
  componentDidMount() {
    setTimeout(() => {
        showNavigationBar()
    },200)
    changeNavigationBarColor('#161e2a', true)
  }

  state ={
    badge : true,
    headerTitle: null,
    leftIconesStyle: HeaderStyle.leftIconesStyleWithoutBack,
    bodyStyle: HeaderStyle.bodyWithoutBackIcon,
    searchBtn: <Button 
                transparent 
                onPress={this.serachBarAction.bind(this)}
                >
                    <Icon 
                    type='MaterialIcons' 
                    name='search' 
                    style={main.Textcolor}
                    />
                </Button>,,
    notifBtn: <Button 
              transparent 
              // onPress={this.serachBarAction.bind(this)}
              >
                {this.badge != false ? <Badge style={HeaderStyle.notifBtnBadge}></Badge> : null}
                  <Icon 
                  type='MaterialIcons' 
                  name='notifications-none' 
                  style={main.Textcolor}
                  />
              </Button>,
    bottomSheet:{
      opened: false,
      height: height-170
    }
  }
  renderInner = () => (
    <View style={searchSheet.panel}>
      
      <Text style={searchSheet.panelTitle}>San Francisco Airport</Text>
      <Text style={searchSheet.panelSubtitle}>
        International Airport - 40 miles away
      </Text>
      <TouchableOpacity onPress={()=> {console.log('close')}} style={searchSheet.panelButton}>
        <Text style={searchSheet.panelButtonTitle} >Directions</Text>
      </TouchableOpacity>
      <View style={searchSheet.panelButton}>
        <Text style={searchSheet.panelButtonTitle}>Search Nearby</Text>
      </View>
      <Image
        style={searchSheet.photo}
        source={air}
      />
    </View>
  )

  renderHeader = () => (
    <View style={searchSheet.header}>
      <View style={searchSheet.panelHeader}>
        <View style={searchSheet.panelHandle} />
        <Button
        transparent 
        onPress={()=> {console.log('close')}}
        style={{position:'absolute',top:-20,left:-5,zIndex:99999999999}}
        >
            <Icon 
            type='MaterialIcons' 
            name='close' 
            style={{color:'#9f9cb9',fontSize:14,backgroundColor:'#474077',width:30,height:30,borderRadius:25,padding:8}}
            onPress={()=> {console.log('close')}}
            />
        </Button>
      </View>
    </View>
  )

  bs = React.createRef()

  render() {
    return (
      <Container style={{backgroundColor:'#161e2a'}}>
        <HeaderOfPage
        bodyTitle= {this.state.headerTitle}
        leftIconesStyle={this.state.leftIconesStyle}
        bodyStyle={this.state.bodyStyle}
        searchBtn= {this.state.searchBtn}
        // backBtn= {this.state.backBtn}
        notifBtn= {this.state.notifBtn}
        />
        <Root>
          <Content style={discoverPage.content}>
            <Text style={[main.fontSize_25,main.textAlign_right,main.footerIconeColor,main.boldFontFamily]}>
              مرور کلی
            </Text>
          </Content>
          <View style={searchSheet.container}>

            <BottomSheet
              ref={this.bs}
              enabledInnerScrolling={true}
              enabledContentTapInteraction={false}
              snapPoints={[ -100, this.state.bottomSheet.height, -100 ]}
              renderContent={this.renderInner}
              renderHeader={this.renderHeader}
              initialSnap={0}
            />
            
          </View>
          <FooterTabOfPage discover={main.iconColor} iconeDiscoverName ={<Text style={[main.normalFontFamily,{fontSize:13,marginTop:5,color:'#7b7f83'}]}>مرور کلی</Text>}/>
        </Root>
      </Container>
    )
  }
  serachBarAction(){
    this.setState({
      headerTitle:null,
      leftIconesStyle:HeaderStyle.leftIconesStyleOnlySearch,
      bodyStyle: HeaderStyle.bodyAndOtherLeftIconeNull,
      notifBtn: null,
      searchBtn: <Item style={[HeaderStyle.serachBarItem,{paddingRight:10}]}>
                  <Button 
                  transparent 
                  onPress={()=>console.log('Searching...')}
                  >
                    <Icon 
                    type='MaterialIcons' 
                    name='search' 
                    style={main.Textcolor}
                    />
                  </Button>
                  <Input 
                  placeholder="جست و جو ..." 
                  placeholderTextColor={'#929292'}
                  onChangeText={this.searchSheetClose.bind(this)}
                  style={[main.normalFontFamily,main.textAlign_right,main.footerIconeColor,{fontSize: 14,}]}/>
                </Item>
    })
    this.searchSheetOpen()
  }

  searchSheetOpen(){
    this.bs.current.snapTo(1)
    this.setState(prevState=>{
        return{
            bottomSheet:{
                ...prevState.bottomSheet,
                opened: true
            }
        }
    })
  }
  searchSheetClose(){
    console.log('close')
    this.bs.current.snapTo(0)
    this.setState(prevState=>{
        return{
            bottomSheet:{
                ...prevState.bottomSheet,
                opened: false
            }
        }
    })
    this.setState({
      leftIconesStyle: HeaderStyle.leftIconesStyleWithoutBack,
      bodyStyle: HeaderStyle.bodyWithoutBackIcon,
      searchBtn: <Button 
                  transparent 
                  onPress={this.serachBarAction.bind(this)}
                  >
                      <Icon 
                      type='MaterialIcons' 
                      name='search' 
                      style={main.Textcolor}
                      />
                  </Button>,
      notifBtn: <Button 
                transparent 
                >
                  {this.badge != false ? <Badge style={HeaderStyle.notifBtnBadge}></Badge> : null}
                    <Icon 
                    type='MaterialIcons' 
                    name='notifications-none' 
                    style={main.Textcolor}
                    />
                </Button>,
    })
  }
}

stye.js :

import EStyleSheet from 'react-native-extended-stylesheet';
import { Dimensions } from 'react-native'
const {width, height}= Dimensions.get('window')

export const searchSheet =  EStyleSheet.create({
    
    container: {
        flex:1,
        backgroundColor: '#161e2a',
        marginLeft:20,
        marginRight:20,
        zIndex:9999999999999,
    },
    box: {
        width: 200,
        height: 200,
    },
    panelContainer: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
    },
    panel: {
        height: height-80,
        padding: 20,
        backgroundColor: '#222e3e',
    },
    header: {
        backgroundColor: '#222e3e',
        shadowColor: '#000000',
        paddingTop: 25,
        borderTopLeftRadius: 25,
        borderTopRightRadius: 25,
        zIndex:99999999999999
    },
    panelHeader: {
        alignItems: 'center',
    },
    panelHandle: {
        width: 60,
        height: 8,
        borderRadius: 4,
        backgroundColor: '#474077',
        marginBottom: 25,
    },
    panelTitle: {
        fontSize: 27,
        height: 35,
    },
    panelSubtitle: {
        fontSize: 14,
        color: 'gray',
        height: 30,
        marginBottom: 10,
    },
    panelButton: {
        padding: 20,
        borderRadius: 10,
        backgroundColor: '#318bfb',
        alignItems: 'center',
        marginVertical: 10,
    },
    panelButtonTitle: {
        fontSize: 17,
        fontWeight: 'bold',
        color: 'white',
    },
    photo: {
        width: '100%',
        height: 225,
        marginTop: 30,
    },
    map: {
        height: '100%',
        width: '100%',
    },
    closeBtn:{
        position:'absolute',
        top:-20,
        left:-5
    },
    closeBtnIcon:{
        color:'#9f9cb9',
        fontSize:14,
        backgroundColor:'#474077',
        width:30,
        height:30,
        borderRadius:25,
        padding:8
    }
})

Answer 1

在 bottomSheet 添加 --> enabledContentGestureInteraction={false}

下面是我实现的底部 sheet。有效

  <BottomSheet
    ref={sheetRef}
    snapPoints={[200, 0]}
    initialSnap={1}
    enabledGestureInteraction={true}
    enabledContentGestureInteraction={false}
    renderHeader={renderHead}
    renderContent={renderContent}
  />

Answer 2

如果你正在使用这个 https://github.com/osdnk/react-native-reanimated-bottom-sheet 然后查看解决方案 -

你需要引入enabledContentTapInteraction={false}默认是true。如果您是 TouchableInterface 或 onPress 事件，请在下面的代码中使用上面的行 -

<BottomSheet 
            ref={bs}
            snapPoints={['45%', 0]}
            renderContent={renderContent}
            renderHeader={renderHeader}
            initialSnap={1}
            // callbackNode={fall}
            enabledGestureInteraction={true}
            enabledContentTapInteraction={false}
            style={{backgroundColor: Color.bgWhite}}
  />

Answer 3

除了设置 enabledContentTapInteraction={false} 之外，使用 onPressOut 事件代替 onPress 也对我有用。尽管对于仅公开 onPress 事件的组件，设置 enabledContentTapInteraction={false} 有效。

onPress 事件在 reanimated-bottom-sheet 的 renderInner 中不起作用

onPress event is not working in renderInner of reanimated-bottom-sheet

react-native

bottom-sheet