React-native - 如何创建无限选择器

Posted 2023-02-25

【中文标题】React-native - 如何创建无限选择器

【英文标题】：React-native - How to create a infinite picker

【发布时间】：2017-08-12 22:23:49

【问题描述】：

我想创建一个无限/循环 react-native Picker，如下图所示。

所以，我的问题是： 滚动时，如何让 Picker 在到达最后一项后从第一项重新开始？

这是我的代码：

render() 
  const hourItems = [];
  for(var i = 0; i < 24; i++) 
    hourItems.push(
      <Picker.Item label=i.toString() value=i key=i />
    );
  

  return(
    <ScrollView style=styles.panel>
      <Picker
        selectedValue=this.state.hour
        onValueChange=(itemValue, itemIndex) => this.setState( hour: itemValue )
      >
        hourItems
      </Picker>
    </ScrollView>
  );

【问题讨论】：

我认为你应该明确你的问题。你到底有什么问题？您不知道如何制作无限循环或如何设计您的应用以匹配您的屏幕？

当我滚动时，如何让 Picker 在到达最后一项后从第一项重新开始？

好的，请看下面我的回答

【参考方案1】：

创建增加分钟和小时值的 redux 操作。在该操作中，您可以检查是否应该重置它，例如：

export const tick = () => (dispatch, getState) => 
   const  minute  = getState().clock
   if (minute === 59) 
     dispatch( type: RESET_MINUTE)
     dispatch( type: INCREMENT_HOUR)
    else 
     dispatch( type: INCREMENT_MINUTE)
   

在减速器中：

const createReducer = (initialState, handlers) =>
  (state = initialState, action) => 
    if (handlers.hasOwnProperty(action.type)) 
      return handlers[action.type](state, action)
    
    return state
  

export default createReducer(initialState, 
  INCREMENT_HOUR(state, action) 
    return 
      ...state,
      hour: state.hour + 1,
    
  ,
  INCREMENT_MINUTE(state, action) 
    return 
      ...state,
      minute: state.minute + 1,
    
  ,
  RESET_MINUTE(state) 
    return 
      ...state,
      minute: 0,
    
  ,
)

然后将你的组件与reducer连接起来，更新应该是自动的:)

【讨论】：

1.使用 redux 完全没有必要增加复杂性 2。这不会创建提问者要求的 UI

@Katie nope，请再次阅读他的问题。他不是在问“如何创建 UI”，而是问如何让它像这样工作。我同意今天 redux 不是必需的，实际上我会推荐使用 hooks，但在两年多以前，它是跨应用程序状态管理的最佳解决方案。