React native 在React Native中生成自定义秒和分钟输入？

我正在做一个运动计时器，我需要输入秒和分钟

理想的用户体验是2个并排选择列表。点击输入会打开两个列表，这与网络不同，在网络上一次只能关注一个列表

我在这里做了一个演示，尽管它需要是模态或类似的：

import*as React from'React'；
从“react native”导入{Text，View，StyleSheet，ScrollView，TouchableOpacity}；
const minutes=新数组（10）.填充（“”）.map（（项目，索引）=>{
收益指数；
})
常数秒=新数组（60）。填充（“”）。映射（（项目，索引）=>{
收益指数；
})
常量项=（{text，isSelected，onPress}）=>{
返回(
{text}
)
}
导出默认函数App（）{
const[selectedMinute，setSelectedMinute]=React.useState（1）；
const[selectedSeconds，setSelectedSeconds]=React.useState（10）；
返回(
会议记录
{
分钟.地图（（项目，索引）=>{
返回集合SelectedMinute（项目）}
text={item}
键={item}
isSelected={selectedMinute===index}
/>
})
}
秒
{
秒。映射（（项目，索引）=>{
返回设置SelectedSeconds（项目）}
text={item}
键={item}
isSelected={selectedSeconds===index}
/>
})
}
);
}
const styles=StyleSheet.create({
容器：{
flexDirection:'行'，
身高：300
},
行：{
弹性：1，
},
滚动：{
身高：300
},
标题：{
尺寸：20，
fontWeight:'粗体'，
textAlign:“中心”
},
项目：{
填充：30，
背景颜色：“灰色”，
边框颜色：“白色”，
边框宽度：1，
为内容辩护：“中心”，
对齐项目：“中心”
},
当选项目：{
背景颜色：“金色”
}
});

在React Native中构建自己的输入可以吗？这在网络上是一个坏主意，因为它可能会导致更糟糕的用户体验（尤其是键盘导航）和屏幕阅读器不知道如何使用的组件

我找不到一个能满足我需要的图书馆。这已关闭，但一次只能打开一个列表。它还有一个主要的缺陷，Redux使它对我不可用：

我一直在尝试使用

Picker

组件，因为我认为它更具语义？它的工作原理与我在iOS上需要的一样，但与安卓系统不同（参见屏幕截图）：

---

我想这会对你有所帮助。请检查一下，距离很近。iOS比Android更好，在我的设计中，带标题的全屏效果最好。因此，基本上我仍然认为我可以通过手动方式获得更好的体验，但我不确定这是否可取？我建议您使用第三方。因为你需要手动处理如此多的情况以及用户界面，因为android手机在屏幕尺寸上非常多。我想这会对你有所帮助。请检查一下，距离很近。iOS比Android更好，在我的设计中，带标题的全屏效果最好。因此，基本上我仍然认为我可以通过手动方式获得更好的体验，但我不确定这是否可取？我建议您使用第三方。因为手动操作需要处理如此多的情况以及用户界面，因为android手机的屏幕尺寸非常大。

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';

const minutes = new Array(10).fill('').map((item, index)=>{
  return index;
})
const seconds = new Array(60).fill('').map((item, index)=>{
  return index;
})

const Item = ({text, isSelected, onPress}) => {
  return(
    <TouchableOpacity 
      onPress={onPress}
      style={[styles.item, isSelected && styles.itemIsSelected]}>
      {text}
    </TouchableOpacity>
  )
}

export default function App() {
  const [selectedMinute, setSelectedMinute] = React.useState(1);
  const [selectedSeconds, setSelectedSeconds] = React.useState(10);

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Text style={styles.heading}>Minutes</Text>
        <ScrollView style={styles.scroll}>
          {
            minutes.map((item, index)=>{
              return <Item
                onPress={()=>setSelectedMinute(item)} 
                text={item} 
                key={item} 
                isSelected={selectedMinute === index} 
              />
            })
          }
        </ScrollView>
      </View>
      <View style={styles.row}>
        <Text style={styles.heading}>Seconds</Text>
        <ScrollView style={styles.scroll}>
          {
            seconds.map((item, index)=>{
              return <Item 
                onPress={()=>setSelectedSeconds(item)} 
                text={item} 
                key={item} 
                isSelected={selectedSeconds === index} 
              />
            })
          }
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: 300
  },
  row: {
    flex: 1,
  },
  scroll: {
    height: 300
  },
  heading: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center'
  },
  item: {
    padding: 30,
    backgroundColor: 'grey',
    borderColor: 'white',
    borderWidth: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  itemIsSelected: {
    backgroundColor: 'gold'
  }
});