如何在react-native-app-intro-slider中使用goToSlide方法？

Question

我使用库react-native-app-intro-slider

\n\n

我制作了自定义 renderPagination，但无法在库中使用 goToSlide 方法。

\n\n

我已经尝试过自定义分页登录注册按钮，但我也无法使用。

\n\n

这是我的代码：

\n\n

const _renderPagination = (activeIndex) => {\nreturn (\n  <View style={style.paginationContainer}>\n    <SafeAreaView>\n      <View style={style.paginationDots}>\n        {slides.length > 1 &&\n          slides.map((_, i) => (\n            <TouchableOpacity\n              key={i}\n              style={[\n                style.dot,\n                i === activeIndex\n                  ? {backgroundColor: '#9948fc'}\n                  : {backgroundColor: 'rgba(0, 0, 0, .2)'},\n              ]}\n            onPress={() => goToSlide(activeIndex, true)} //Error\n            />\n          ))}\n      </View>\n      {activeIndex === slides.length - 1 ? (\n        <View>\n          <TouchableOpacity\n            style={[style.button, {backgroundColor: '#9948fc'}]}\n            onPress={() => navigation.navigate('signup')}\n            >\n            <Text style={style.buttonText}>\xed\x9a\x8c\xec\x9b\x90\xea\xb0\x80\xec\x9e\x85</Text>\n          </TouchableOpacity>\n          <TouchableOpacity\n            style={[style.button, {backgroundColor: 'transparent'}]}\n            onPress={()=> navigation.navigate('signup', {log:1})}>\n            <Text style={[style.buttonText, {color: '#707070'}]}>\n              \xeb\xa1\x9c\xea\xb7\xb8\xec\x9d\xb8\n            </Text>\n          </TouchableOpacity>\n        </View>\n      ) : (\n        <View>\n          <TouchableOpacity\n            style={[style.button, {backgroundColor: 'transparent'}]}\n          ><Text style={style.buttonText}/></TouchableOpacity>\n          <TouchableOpacity\n            style={[style.button, {backgroundColor: 'transparent'}]}\n            onPress={() => goToSlide(activeIndex+1, true)}\n            >\n            <Text style={[style.buttonText, {color: '#707070'}]}>\n              \xeb\x8b\xa4\xec\x9d\x8c\n            </Text>\n          </TouchableOpacity>\n        </View>\n      )}\n    </SafeAreaView>\n  </View>\n);\n

\n\n

};

\n

Answer 1

我只想在功能组件中添加解决方案。这对我有用：

const slider = useRef();

return(
    <AppIntroSlider
      renderItem={renderItem}
      data={slides}
      onDone={onDone}
      showNextButton={true}
      ref={(ref) => (slider.current = ref)} // the ref
    />
  );

onPress={() => slider.current.goToSlide(1, true)}