带有JSX内容的旋转木马类型功能

Question

我希望将页面/组件添加到以下控件。当前，当您前后单击时，将在导航控件之间显示计数。我试图实现的目标是创建一个在组件/视图之间滑动的导航。我在路由时遇到麻烦，因为它也位于选项卡式视图中，因此理想情况下希望保持相同的路由，而不必担心为每个视图更改此路由。参见屏幕截图。

以下代码创建了Nav，当您前后单击时，我需要有关添加视图的最佳方法的建议。类似于轮播，但使用视图而不是图像。谢谢。

    import React from "react"

import styled, { css } from 'styled-components'

import './style.css'

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;

const Container = styled.div`
  text-align: center;
`
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
        this.handleForwardClick = this.handleForwardClick.bind(this);
        this.handleBackwardClick = this.handleBackwardClick.bind(this)
    }

    handleForwardClick() {
        this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        })
    }

    handleBackwardClick() {
        this.setState(prevState => {
            return {
                count: prevState.count - 1
            }
        })
    }

    render() {
        return (
            <Container className="flex-buttons">               
                <Button onClick={this.handleForwardClick}>Forward</Button>
                <h1>{this.state.count}</h1>
                <Button primary onClick={this.handleBackwardClick}>Backward</Button>
            </Container>
        )
    }
}

export default App

Answer 1

您正在寻找的东西通常称为水平轮选择器。我发现https://www.npmjs.com/package/react-native-horizontal-picker在React Native中，而不在ReactJS中。但是，这似乎很简单，因此也许可以帮助您自己实现它。这似乎也是针对React Native的一个相关问题的建议：Input number in Angular Material Design?

我不知道像Ant Design这样的大型库中有任何现成的解决方案。他们只提供例如antd:input-number。

更多参考

• https://reactnativeexample.com/a-simple-react-native-wheel-picker/