Стайлинг для Picker React Native - PullRequest
Новая
       12

Стайлинг для Picker React Native

0 голосов
/ 21 марта 2019

Я работаю с родной базой Picker для React Native.Я хочу стиль выбора, как изображение, которое я публикую с Android и iOS.Но я не знаю, как это сделать.

enter image description here

1 Ответ

1 голос
/ 21 марта 2019

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

Добавить внутрь рендера () 

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