Question

我想要一些指导，以使其能够在反应本机元素“ Buttongroups”之间滑动。

我找到了一个“ swiper”库，但无法使其与按钮组一起使用。 https://github.com/leecade/react-native-swiper

有没有人知道如何实现此目标？我希望能够同时滑动和按下其中一个按钮。

我的组件，包括ButtonGroup：

class Users extends Component {
  constructor () {
    super()
    this.state = {
      selectedIndex: 0,
      loading: false
    }
    this.updateIndex = this.updateIndex.bind(this)
  }

  // Call fetchList with 0 to get access to all users

  componentWillMount () {
    let i = 0
    this.props.fetchList(i)
    this.props.fetchProfileData()
  }

  // updates the selectedIndex and calls the methods with the selectedindex

  updateIndex (selectedIndex) {
    this.setState({selectedIndex})
    this.fetchAllUsers(selectedIndex)
    this.fetchFemale(selectedIndex)
    this.fetchMale(selectedIndex)
  }

  fetchAllUsers (index) {
    if (index === 0) {
      this.props.fetchList(index)
    }
  }
  fetchFemale (index) {
    if (index === 1) {
      this.props.fetchList(index)
    }
  }

  fetchMale (index) {
    if (index === 2) {
      this.props.fetchList(index)
    }
  }

  renderItem ({ item }) {
    return <ListUserItem user={item} />
  }

  render () {
    const buttons = ['All', 'Female', 'Male']
    const { selectedIndex } = this.state
    return (

      <ImageBackground
        source={require('../../assets/image.jpg')}
        style={styles.container}
         >

        <HeaderBlack />

        <View>
          <BlurView
            style={styles.absolute}
            blurType='dark'
            blurAmount={0.001}
            height={695} />

          <View style={{ justifyContent: 'center', alignItems: 'center' }} >

            <ButtonGroup
              onPress={this.updateIndex.bind(this)}
              selectedIndex={selectedIndex}
              selectedButtonStyle={{backgroundColor: 'black'}}
              buttons={buttons}
              containerStyle={{ backgroundColor: 'transparent', height: 23, width: 200, marginTop: 30, marginBottom: -20, justifyContent: 'center', alignItems: 'baseline' }}
              textStyle={{fontFamily: 'GeosansLight', color: 'white'}} />

          </View>

          <View style={{ maxHeight: 580, marginTop: 50 }} >

            <FlatList
              data={this.props.users}
              renderItem={this.renderItem}
           />

          </View>
        </View>
      </ImageBackground>

    )
  }
}

Answer 1

我通常将hammer.js用于需要管理的任何滑动交互。本质上，该库只是让您创建自定义事件监听器，以进行滑动，平移，收缩，旋转等操作，并将它们附加到所需的任何元素上。只要您有对该元素的引用，它是否是react元素都无关紧要，它应该可以相同地工作。

使React Native Elements ButtonGroup可滑动

1 个答案: