reactjs - Picker React Native 的样式
问题描述
我正在使用 Picker native-base 来 React Native。我想要样式选择器,就像我在 Android 和 iOS 上发布的图片一样。但我不知道如何设计这样的风格。
解决方案
安装 npm 库
https://www.npmjs.com/package/react-native-smooth-picker npm i react-native-smooth-picker您还可以从 git 存储库 https://github.com/rdhox/react-native-smooth-picker检查
全局声明常量
import SmoothPicker from "react-native-smooth-picker";
const Bubble = props => {
const { children, selected, horizontal } = props;
return (
<View
style={[
horizontal ? styles.itemStyleHorizontal : styles.itemStyleVertical,
selected &&
(horizontal
? styles.itemSelectedStyleHorizontal
: styles.itemSelectedStyleVertical)
]}
>
<Text
style={{
textAlign: "center",
fontSize: selected ? 20 : 17,
color: selected ? "#006E4F" : "#006E4F",
fontWeight: selected ? "bold" : "normal",
}}
>
{children}
</Text>
</View>
);
};
在 render() 中添加
<SmoothPicker
initialScrollToIndex={selected}
onScrollToIndexFailed={() => {}}
keyExtractor={(_, index) => index.toString()}
showsVerticalScrollIndicator={false}
bounces={true}
offsetSelection={40}
scrollAnimation
data={Array.from({ length: 15 }, (_, i) => 0 + i)}
onSelected={({ item, index }) => this.handleChange(index)}
renderItem={({ item, index }) => (
<Bubble selected={index === selected}>{item}</Bubble>
)}
/>
检查示例项目的样式,您需要稍作修改。
const styles = StyleSheet.create({ container: { paddingTop: 60, paddingBottom: 30, flex: 1, flexDirection: "column", justifyContent: "space-between", alignItems: "center", backgroundColor: "#F5FCFF" }, wrapperHorizontal: { width: 300, height: 50, justifyContent: "center", alignItems: "center", margin: "auto", color: "black", marginBottom: 80 }, wrapperVertical: { width: 100, height: 300, justifyContent: "center", alignItems: "center", margin: "auto", color: "black" }, itemStyleVertical: { justifyContent: "center", alignItems: "center", width: 50, height: 50, paddingTop: 0, borderWidth: 1, borderColor: "grey", borderRadius: 0, backgroundColor: "#D9F5ED" }, itemSelectedStyleVertical: { paddingTop: 0, borderWidth: 2, borderColor: "#DAA520", justifyContent: "center", alignItems: "center", backgroundColor: "#D9F5ED" }, itemStyleHorizontal: { justifyContent: "center", alignItems: "center", width: 50, height: 50, paddingTop: 0, borderWidth: 1, borderColor: "grey", borderRadius: 0, backgroundColor: "#D9F5ED" }, itemSelectedStyleHorizontal: { paddingTop: 0, borderWidth: 2, borderColor: "#DAA520", justifyContent: "center", alignItems: "center", backgroundColor: "#D9F5ED" } });
推荐阅读
- c++ - 如果我给出了以 10 为底的数字并将相同的数字转换为我们需要找到的任何底数,我如何找到数字的底数
- asp.net - 如果.net core中的用户的数据库中已经存在,如何从选择中删除选项
- hyperledger-fabric - 如何使用fabric sdk初始化fabric CA
- android - Android:当键盘出现时如何滚动滚动视图以显示下一个字段
- azure-devops - 使用 OAuth 和 PowerShell 更新 Azure DevOps Wiki 页面
- java - 如何在杰克逊的注释 JSON 属性中使用正则表达式
- javascript - 从 Javascript / Typescript 中的数组中删除子对象重复项
- python - 唯一约束违规
- c# - xml 的流利断言
- java - 设计一个系统以更快地检索和修改而不会给堆内存带来负担