分解React本机组件

问题描述

我一直在尝试开发一个react native应用程序，但是我被困在这里。我想分解入职组件。这就是我所做的。是oke还是我还能做更多可读的代码？我已经将Slider和SubSlider组件进行了划分，但是我认为这还不够。我可以使用component代替Function吗？任何建议都对我有帮助。在这种情况下，最佳做法是什么？谢谢

const renderScrollView = (scroll,width: number,x: Animated.Value) => {
  return (
    <Animated.ScrollView showsHorizontalScrollIndicator={false} ref={scroll} pagingEnabled
      onScroll={Animated.event([{ nativeEvent: { contentOffset: { x } } }],{
        useNativeDriver: true,})} 
      horizontal
   >
      {slides.map((data,index) => {
        return (
          <Slider key={index}>
            <SliderImage src={data.src} />
            <Box paddingHorizontal="l">
              <SliderTitle>{data.label}</SliderTitle>
              <SliderText>{data.description}</SliderText>
            </Box>
          </Slider>
        );
      })}
    </Animated.ScrollView>
  );
};

const renderSubSlider = (width: number,x: Animated.Value) => {
  return (
    <SubSlider>
      <SubSliderItem>
        {slides.map((_,index) => {
          return (
            <Dot
              key={index + 1}
              currentIndex={Animated.divide(x,width)}
              {...{ index }}
            />
          );
        })}
      </SubSliderItem>
   
    </SubSlider>
  );
};

const Onboarding = React.memo(({ onDone }: OnboardingProps) => {
  const { width } = useDimensions().window;
  const [completed,setCompleted] = useState<boolean>(false);
  const scroll = useRef(null);

  const x = React.useRef<Animated.Value>(new Animated.Value(0)).current;

  React.useEffect(() => {
    x.addListener(({ value }) => {
      if (Math.ceil(value / width) === slides.length - 1) {
        setCompleted(true);
      } else {
        setCompleted(false);
      }
    });

    return () => x.removeAllListeners();
  },[]);

  return (
    <Box flex={1} backgroundColor="mainBackground">
      <Box flex={3}>{renderScrollView(scroll,width,x)}</Box>

      {renderSubSlider(width,x)}
    </Box>
  );
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）