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

Question

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

\n

bottomSheet用于测试的空页面内部工作得很好，但在主页内部则renderInner onPress不起作用。

\n

ButtoninsiderenderHeader不起作用，main.js而这个button import来自nativeBase，我再次使用inputTextinsiderenderInner不起作用，但是当我将 200 设置为 sizeinput border并按下 时，它border起作用了，我不知道为什么

\n

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

\n

import React from 'react'\nimport {\n  Image,\n  StyleSheet,\n  Text,\n  TouchableWithoutFeedback,\n  View,\n  TextInput,\nDimensions\n} from 'react-native'\nimport { Button,Icon } from 'native-base';\n\nimport BottomSheet from 'reanimated-bottom-sheet'\nconst {width, height}= Dimensions.get('window')\n\n\nexport default class Example extends React.Component {\n    state = {\n        bottomSheet:{\n            opened: false,\n            height: height-80\n        }\n    }\n  renderInner = () => (\n    <View style={styles.panel}>\n        \n      <Text style={styles.panelTitle}>San Francisco Airport</Text>\n      <Text style={styles.panelSubtitle}>\n        International Airport - 40 miles away\n      </Text>\n      <Button transparent onPress={()=>{console.log("Press")}} style={styles.panelButton}>\n        <Text style={styles.panelButtonTitle}>Directions</Text>\n      </Button>\n      <View style={styles.panelButton}>\n        <Text style={styles.panelButtonTitle}>Search Nearby</Text>\n      </View>\n      <Image\n        style={styles.photo}\n        source={require('./../../assets/image/airport-photo.jpg')}\n      />\n    </View>\n  )\n\n  renderHeader = () => (\n    <View style={styles.header}>\n      <View style={styles.panelHeader}>\n        <View style={styles.panelHandle} />\n        <Button \n        transparent \n        onPress={this.searchSheetClose.bind(this)}\n        style={{position:'absolute',top:-20,left:-5}}\n        >\n            <Icon \n            type='MaterialIcons' \n            name='close' \n            style={{color:'#9f9cb9',fontSize:14,backgroundColor:'#474077',width:30,height:30,borderRadius:25,padding:8}}\n            />\n        </Button>\n      </View>\n    </View>\n  )\n\n  bs = React.createRef()\n\n  render() {\n    return (\n      <View style={styles.container}>\n\n        <BottomSheet\n          ref={this.bs}\n          snapPoints={[ -20, this.state.bottomSheet.height, 50 ]}\n          renderContent={this.renderInner}\n          renderHeader={this.renderHeader}\n          initialSnap={0}\n        />\n        \n        <Button \n        transparent \n        onPress={this.searchSheetOpen.bind(this)}\n        >\n            <Icon \n            type='MaterialIcons' \n            name='search' \n            \n            />\n        </Button>\n      </View>\n    )\n  }\n  searchSheetOpen(){\n    this.bs.current.snapTo(1)\n    this.setState(prevState=>{\n        return{\n            bottomSheet:{\n                ...prevState.bottomSheet,\n                opened: true\n            }\n        }\n    })\n  }\n  searchSheetClose(){\n      console.log('ok')\n    this.bs.current.snapTo(0)\n    this.setState(prevState=>{\n        return{\n            bottomSheet:{\n                ...prevState.bottomSheet,\n                opened: false\n            }\n        }\n    })\n  }\n}\n\nconst IMAGE_SIZE = 200\n\nconst styles = StyleSheet.create({\n\n  container: {\n    flex: 1,\n    backgroundColor: '#161e2a',\n  },\n  box: {\n    width: IMAGE_SIZE,\n    height: IMAGE_SIZE,\n  },\n  panelContainer: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n  panel: {\n    height: height-80,\n    padding: 20,\n    backgroundColor: '#222e3e',\n\n  },\n  header: {\n    backgroundColor: '#222e3e',\n    shadowColor: '#000000',\n    paddingTop: 25,\n    borderTopLeftRadius: 25,\n    borderTopRightRadius: 25,\n  },\n  panelHeader: {\n    alignItems: 'center',\n  },\n  panelHandle: {\n    width: 60,\n    height: 8,\n    borderRadius: 4,\n    backgroundColor: '#474077',\n    marginBottom: 25,\n  },\n  panelTitle: {\n    fontSize: 27,\n    height: 35,\n  },\n  panelSubtitle: {\n    fontSize: 14,\n    color: 'gray',\n    height: 30,\n    marginBottom: 10,\n  },\n  panelButton: {\n    padding: 20,\n    borderRadius: 10,\n    backgroundColor: '#318bfb',\n    alignItems: 'center',\n    marginVertical: 10,\n  },\n  panelButtonTitle: {\n    fontSize: 17,\n    fontWeight: 'bold',\n    color: 'white',\n  },\n  photo: {\n    width: '100%',\n    height: 225,\n    marginTop: 30,\n  },\n  map: {\n    height: '100%',\n    width: '100%',\n  },\n})\n\n

\n

和main.js页面：

\n

import React, { Component } from 'react';\nimport changeNavigationBarColor,{ showNavigationBar } from 'react-native-navigation-bar-color';\nimport { Container, Root, Content, Text, Footer, View, Button, Icon,Badge, Item,Input } from 'native-base';\nimport Animated from 'react-native-reanimated';\nimport BottomSheet from 'reanimated-bottom-sheet';\nimport { Dimensions,Image } from 'react-native'\n\nimport { main, discoverPage, HeaderStyle, searchSheet } from './../../assets/style'\nimport HeaderOfPage from './../../components/Header'\nimport FooterTabOfPage from './../../components/FooterTab'\nimport air from './../../assets/image/airport-photo.jpg'\n\nconst {width, height}= Dimensions.get('window')\n\nexport default class Splash extends Component {\n  componentDidMount() {\n    setTimeout(() => {\n        showNavigationBar()\n    },200)\n    changeNavigationBarColor('#161e2a', true)\n  }\n\n  state ={\n    badge : true,\n    headerTitle: null,\n    leftIconesStyle: HeaderStyle.leftIconesStyleWithoutBack,\n    bodyStyle: HeaderStyle.bodyWithoutBackIcon,\n    searchBtn: <Button \n                transparent \n                onPress={this.serachBarAction.bind(this)}\n                >\n                    <Icon \n                    type='MaterialIcons' \n                    name='search' \n                    style={main.Textcolor}\n                    />\n                </Button>,,\n    notifBtn: <Button \n              transparent \n              // onPress={this.serachBarAction.bind(this)}\n              >\n                {this.badge != false ? <Badge style={HeaderStyle.notifBtnBadge}></Badge> : null}\n                  <Icon \n                  type='MaterialIcons' \n                  name='notifications-none' \n                  style={main.Textcolor}\n                  />\n              </Button>,\n    bottomSheet:{\n      opened: false,\n      height: height-170\n    }\n  }\n  renderInner = () => (\n    <View style={searchSheet.panel}>\n      \n      <Text style={searchSheet.panelTitle}>San Francisco Airport</Text>\n      <Text style={searchSheet.panelSubtitle}>\n        International Airport - 40 miles away\n      </Text>\n      <TouchableOpacity onPress={()=> {console.log('close')}} style={searchSheet.panelButton}>\n        <Text style={searchSheet.panelButtonTitle} >Directions</Text>\n      </TouchableOpacity>\n      <View style={searchSheet.panelButton}>\n        <Text style={searchSheet.panelButtonTitle}>Search Nearby</Text>\n      </View>\n      <Image\n        style={searchSheet.photo}\n        source={air}\n      />\n    </View>\n  )\n\n  renderHeader = () => (\n    <View style={searchSheet.header}>\n      <View style={searchSheet.panelHeader}>\n        <View style={searchSheet.panelHandle} />\n        <Button\n        transparent \n        onPress={()=> {console.log('close')}}\n        style={{position:'absolute',top:-20,left:-5,zIndex:99999999999}}\n        >\n            <Icon \n            type='MaterialIcons' \n            name='close' \n            style={{color:'#9f9cb9',fontSize:14,backgroundColor:'#474077',width:30,height:30,borderRadius:25,padding:8}}\n            onPress={()=> {console.log('close')}}\n            />\n        </Button>\n      </View>\n    </View>\n  )\n\n  bs = React.createRef()\n\n  render() {\n    return (\n      <Container style={{backgroundColor:'#161e2a'}}>\n        <HeaderOfPage\n        bodyTitle= {this.state.headerTitle}\n        leftIconesStyle={this.state.leftIconesStyle}\n        bodyStyle={this.state.bodyStyle}\n        searchBtn= {this.state.searchBtn}\n        // backBtn= {this.state.backBtn}\n        notifBtn= {this.state.notifBtn}\n        />\n        <Root>\n          <Content style={discoverPage.content}>\n            <Text style={[main.fontSize_25,main.textAlign_right,main.footerIconeColor,main.boldFontFamily]}>\n              \xd9\x85\xd8\xb1\xd9\x88\xd8\xb1 \xda\xa9\xd9\x84\xdb\x8c\n            </Text>\n          </Content>\n          <View style={searchSheet.container}>\n\n            <BottomSheet\n              ref={this.bs}\n              enabledInnerScrolling={true}\n              enabledContentTapInteraction={false}\n              snapPoints={[ -100, this.state.bottomSheet.height, -100 ]}\n              renderContent={this.renderInner}\n              renderHeader={this.renderHeader}\n              initialSnap={0}\n            />\n            \n          </View>\n          <FooterTabOfPage discover={main.iconColor} iconeDiscoverName ={<Text style={[main.normalFontFamily,{fontSize:13,marginTop:5,color:'#7b7f83'}]}>\xd9\x85\xd8\xb1\xd9\x88\xd8\xb1 \xda\xa9\xd9\x84\xdb\x8c</Text>}/>\n        </Root>\n      </Container>\n    )\n  }\n  serachBarAction(){\n    this.setState({\n      headerTitle:null,\n      leftIconesStyle:HeaderStyle.leftIconesStyleOnlySearch,\n      bodyStyle: HeaderStyle.bodyAndOtherLeftIconeNull,\n      notifBtn: null,\n      searchBtn: <Item style={[HeaderStyle.serachBarItem,{paddingRight:10}]}>\n                  <Button \n                  transparent \n                  onPress={()=>console.log('Searching...')}\n                  >\n                    <Icon \n                    type='MaterialIcons' \n                    name='search' \n                    style={main.Textcolor}\n                    />\n                  </Button>\n                  <Input \n                  placeholder="\xd8\xac\xd8\xb3\xd8\xaa \xd9\x88 \xd8\xac\xd9\x88 ..." \n                  placeholderTextColor={'#929292'}\n                  onChangeText={this.searchSheetClose.bind(this)}\n                  style={[main.normalFontFamily,main.textAlign_right,main.footerIconeColor,{fontSize: 14,}]}/>\n                </Item>\n    })\n    this.searchSheetOpen()\n  }\n\n  searchSheetOpen(){\n    this.bs.current.snapTo(1)\n    this.setState(prevState=>{\n        return{\n            bottomSheet:{\n                ...prevState.bottomSheet,\n                opened: true\n            }\n        }\n    })\n  }\n  searchSheetClose(){\n    console.log('close')\n    this.bs.current.snapTo(0)\n    this.setState(prevState=>{\n        return{\n            bottomSheet:{\n                ...prevState.bottomSheet,\n                opened: false\n            }\n        }\n    })\n    this.setState({\n      leftIconesStyle: HeaderStyle.leftIconesStyleWithoutBack,\n      bodyStyle: HeaderStyle.bodyWithoutBackIcon,\n      searchBtn: <Button \n                  transparent \n                  onPress={this.serachBarAction.bind(this)}\n                  >\n                      <Icon \n                      type='MaterialIcons' \n                      name='search' \n                      style={main.Textcolor}\n                      />\n                  </Button>,\n      notifBtn: <Button \n                transparent \n                >\n                  {this.badge != false ? <Badge style={HeaderStyle.notifBtnBadge}></Badge> : null}\n                    <Icon \n                    type='MaterialIcons' \n                    name='notifications-none' \n                    style={main.Textcolor}\n                    />\n                </Button>,\n    })\n  }\n}\n

\n

stye.js:

\n

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

\n

Answer 1

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

下面是我实现的底部表格。有用

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