react-native - 我如何在我的滚动视图上放置点

Question

我正在使用以下代码在其底部显示滚动视图和点。现在我想在我的滚动视图上方显示这些点，但我不知道该怎么做。

我的代码

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <View
      style={{ width, height: width }}
      >
      <ScrollView
        horizontal={true}
        pagingEnabled={true}
        showsHorizontalScrollIndicator={false}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { x: this.scrollX } } }]
        )} 
        scrollEventThrottle={16}
        >
        {this.state.dataSource.map((source, i) => { 
          return ( 
            <Image
              key={i}
              style={{ width, height: width }}
              source={{uri: source.image}}
            />
          );
        })}
      </ScrollView>
    </View>
    <View
      style={{ flexDirection: 'row' }}
      >
      {this.state.dataSource.map((_, i) => { 
        let opacity = position.interpolate({
          inputRange: [i - 1, i, i + 1],
          outputRange: [0.3, 1, 0.3],
          extrapolate: 'clamp' 
        });
        return (
          <Animated.View 
            key={i}
            style={{ opacity, height: 5, width: 5, backgroundColor: '#595959', margin: 2, borderRadius: 5 }}
          />
        );
      })}
    </View>
  </View>

标签： react-native

Answer 1

我假设您仍在学习 react-native/react。您已经想出了一半的解决方案，您只需要将点视图放在滚动视图上方：

render(){
return(
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <View
      style={{ width, height: width }}
      >
{this.renderDotsView(this.state.dataSource, position)}
      <ScrollView
        horizontal={true}
        pagingEnabled={true}
        showsHorizontalScrollIndicator={false}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { x: this.scrollX } } }]
        )} 
        scrollEventThrottle={16}
        >
        {this.state.dataSource.map((source, i) => { 
          return ( 
            <Image
              key={i}
              style={{ width, height: width }}
              source={{uri: source.image}}
            />
          );
        })}
      </ScrollView>
    </View>

  </View>
)}

renderDotsView = (array, position) =>{
return(
 <View
      style={{ flexDirection: 'row' }}
      >
      {array.map((_, i) => { 
        let opacity = position.interpolate({
          inputRange: [i - 1, i, i + 1],
          outputRange: [0.3, 1, 0.3],
          extrapolate: 'clamp' 
        });
        return (
          <Animated.View 
            key={i}
            style={{ opacity, height: 5, width: 5, backgroundColor: '#595959', margin: 2, borderRadius: 5 }}
          />
        );
      })}
    </View>
)
}