用文本反应本机，图像滑块框

debugcn 发表于 Dev

黑暗王子

我是本机的新用户，我已安装它，react-native-image-slider-box但我也希望当该图像的图像幻灯片标题也像用户幻灯片图像一样更改时，使该图像的标题也更改。我更改了react-native-image-slider-box程序包的代码，但无法正常工作。下面是该代码

 _renderItem({ item, index }) {
    const {
      ImageComponent,
      ImageComponentStyle = {},
      sliderBoxHeight,
      disableOnPress,
      resizeMethod,
      resizeMode,
      imageLoadingColor = "#E91E63"
    } = this.props;
    return (
      <View
        style={{
          position: "relative",
          justifyContent: "center"
        }}
      >
        <Text style={[style.fontSize30Semi, {marginRight: moderateScale(100)}]}>
          {this.props.title}
        </Text> //that's the code I added in react-native-image-slider-box
          <ImageComponent
            style={[
              {
                width: '100%',
                height: moderateScaleVertical(350),
                marginVertical: moderateScaleVertical(10),
              },
              ImageComponentStyle
            ]}
            source={typeof item === "string" ? { uri: item } : item}
            resizeMethod={resizeMethod || "resize"}
            resizeMode={resizeMode || "cover"}
            onLoad={() => {}}
            onLoadStart={() => {}}
            onLoadEnd={() => {
              let t = this.state.loading;
              t[index] = true;
              this.setState({ loading: t });
            }}
            {...this.props}
          />
        {!this.state.loading[index] && (
          <ActivityIndicator
            size="large"
            color={imageLoadingColor}
            style={{
              position: "absolute",
              alignSelf: "center"
            }}
          />
        )}
      </View>
    );
  }

Welcome.js

 state = {
    images: [imagePath.welcome1, imagePath.welcome2, imagePath.welcome3],
    desc: ['Hello', 'My'],
  };
  ...
  <SliderBox images={this.state.images} title={this.state.desc} />

那就是我的代码，我试图为不同的图像渲染不同的标题。谁能帮助我，告诉我该怎么做？

古拉帕兰·吉里塔兰（Guruparan Giritharan）

该库支持任何文本，您可以执行以下操作

 state = {
    images: [imagePath.welcome1, imagePath.welcome2, imagePath.welcome3],
    desc: ['Hello', 'My'],
    currentIndex:0
  };
  
      <Text>{this.state.desc[this.state.currentIndex]}</Text>
      <SliderBox images={this.state.images} title={this.state.desc} currentImageEmitter={i=>this.setState({currentIndex:i})}/>

currentImageEmitter将发送当前图像的索引，您可以使用它来更新状态并根据索引显示文本。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。