Picker React Native的样式

时间:2019-03-21 04:34:52

标签: reactjs react-native native-base

我正在使用Picker native-base来实现React Native。我想要样式选择器,就像我在Android和iOS上发布的图片一样。但我不知道该如何设计样式。

enter image description here

1 个答案:

答案 0 :(得分:1)

  1. 安装npm库
    https://www.npmjs.com/package/react-native-smooth-picker npm我的反应是原生选择器

  2. 您还可以从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>
            )}
          />
  1. 检查示例项目的样式,您需要进行一些修改。

    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"
      }
    });