Блог

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

1. Установите библиотеку npm
   https://www.npmjs.com/package/react-native-smooth-picker в npm я использую react-native-smooth-средство выбора

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 amp;amp;
          (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>
            )}
          />
  

3. Проверьте образец проекта на предмет стиля, его нужно немного доработать.

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