Javascript 滚动查看snapToInterval和snapToAlignment不适用于文本元素列表

我正在尝试重新创建一个类似Instagram相机底部的水平滚动视图。它是一个文本元素的水平列表，当您滚动经过它时，每个元素都会捕捉到中心。它允许您选择各种相机设置。以下是一个屏幕截图：

但是，我无法使snapToInterval或snapToAlignment工作。相反，scrollView与flex start对齐，没有捕捉动画。这是一个gif（仍然需要进行样式设置）：

以下是完整的组件：

'use strict';
import React from 'react';
import { View, Text, ScrollView } from 'react-native';

const CameraSlider = () => (
    <View style={styles.sliderViewStyle}>
        <ScrollView
            horizontal
            snapToInterval={100}
            snapToAlignment="center"
            decelerationRate="fast"
        >
            <Text style={styles.textContentStyle}>PHOTO</Text>
            <Text style={styles.textContentStyle}>VIDEO</Text>
        </ScrollView>
    </View>
);

const styles = {
    textContentStyle: {
        color: 'white',
        width: 100,
        fontSize: 16
    },
    sliderViewStyle: {
        height: 40
    }
};

export default CameraSlider;

“严格使用”；
从“React”导入React；
从“react native”导入{View，Text，ScrollView}；
常量摄影机滑块=（）=>(
照片
视频
);
常量样式={
文本内容样式：{
颜色：'白色'，
宽度：100，
字体大小：16
},
sliderViewStyle：{
身高：40
}
};
导出默认摄影机滑块；

---

我做错了什么？任何帮助都将不胜感激

我最终用第三方库解决了这个问题。我本想避免这样做，但我看不出有其他的解决办法。在撰写本文时，该库似乎得到了良好的使用和维护，文档也非常优秀

这是最终代码的样子：

'use strict';
import React from 'react';
import { View, Text, Dimensions } from 'react-native';
import Carousel from 'react-native-snap-carousel';

const SCREEN_WIDTH = Dimensions.get('screen').width;

const MediaTypeSlider = props => {
    const renderItem = ({ item }) => (
        <Text style={styles.textContentStyle}>{item.toUpperCase()}</Text>
    );

    return (
        <View style={styles.sliderViewStyle}>
            <Carousel
                data={props.mediaTypes}
                renderItem={renderItem}
                sliderWidth={SCREEN_WIDTH}
                itemWidth={80}
                itemHeight={50}
                sliderHeight={50}
                onSnapToItem={props.toggleMediaType}
            />
        </View>
    );
};

const styles = {
    textContentStyle: {
        color: 'white',
        width: 80,
        fontSize: 17,
        textAlign: 'center',
        fontWeight: '500'
    },
    sliderViewStyle: {
        height: 50,
        alignItems: 'center'
    }
};

export default MediaTypeSlider;

“严格使用”；
从“React”导入React；
从“react native”导入{View，Text，Dimensions}；
从“react native snap Carousel”导入转盘；
const SCREEN_WIDTH=尺寸.get（'SCREEN'）.WIDTH；
常量MediaTypeSlider=props=>{
常量renderItem=（{item}）=>(
{item.toUpperCase（）}
);
返回(
);
};
常量样式={
文本内容样式：{
颜色：'白色'，
宽度：80，
尺寸：17，
textAlign:'中心'，
重量：'500'
},
sliderViewStyle：{
身高：50，
对齐项目：“中心”
}
};
导出默认MediaTypeSlider；

这就是它的作用：

---

我最终用第三方库解决了这个问题。我本想避免这样做，但我看不出有其他的解决办法。在撰写本文时，该库似乎得到了良好的使用和维护，文档也非常优秀

这是最终代码的样子：

'use strict';
import React from 'react';
import { View, Text, Dimensions } from 'react-native';
import Carousel from 'react-native-snap-carousel';

const SCREEN_WIDTH = Dimensions.get('screen').width;

const MediaTypeSlider = props => {
    const renderItem = ({ item }) => (
        <Text style={styles.textContentStyle}>{item.toUpperCase()}</Text>
    );

    return (
        <View style={styles.sliderViewStyle}>
            <Carousel
                data={props.mediaTypes}
                renderItem={renderItem}
                sliderWidth={SCREEN_WIDTH}
                itemWidth={80}
                itemHeight={50}
                sliderHeight={50}
                onSnapToItem={props.toggleMediaType}
            />
        </View>
    );
};

const styles = {
    textContentStyle: {
        color: 'white',
        width: 80,
        fontSize: 17,
        textAlign: 'center',
        fontWeight: '500'
    },
    sliderViewStyle: {
        height: 50,
        alignItems: 'center'
    }
};

export default MediaTypeSlider;

“严格使用”；
从“React”导入React；
从“react native”导入{View，Text，Dimensions}；
从“react native snap Carousel”导入转盘；
const SCREEN_WIDTH=尺寸.get（'SCREEN'）.WIDTH；
常量MediaTypeSlider=props=>{
常量renderItem=（{item}）=>(
{item.toUpperCase（）}
);
返回(
);
};
常量样式={
文本内容样式：{
颜色：'白色'，
宽度：80，
尺寸：17，
textAlign:'中心'，
重量：'500'
},
sliderViewStyle：{
身高：50，
对齐项目：“中心”
}
};
导出默认MediaTypeSlider；

这就是它的作用：

---

因为滚动碰到了左侧内容的边缘，您无法再向左滚动。有几种方法可以解决这个问题。其中之一是：为左侧和右侧设置

contentInset

。我以前使用过的另一种方法是：您需要根据需要进行一些计算，只需使最左侧的“视图”留有一个边距，这样就可以将文本本身滚动到中心，因为左侧仍然有内容。同样适用于最右边的“视图”

下面是我的代码示例：

           <ScrollView
      ref={(scrollView) => { this.scrollView = scrollView; }}
      style={styles.container}
      horizontal
      decelerationRate={0}
      snapToInterval={80}
      pagingEnabled={Platform.OS === 'android'}
      snapToAlignment="center"
      overScrollMode="never"
      scroll
      contentInset={{
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
      }}
    >

      <View style={[styles.view, { backgroundColor: 'red', marginLeft: 160, paddingLeft: 60 }]} />
      <View style={styles.view} />
      <View style={[styles.view, { backgroundColor: 'red' }]} />
      <View style={styles.view} />
      <View style={[styles.view, { backgroundColor: 'red' }]} />
      <View style={[styles.view, { marginRight: 160, paddingRight: 60 }]} />
    </ScrollView>

{this.scrollView=scrollView；}
style={style.container}
水平的
减速率={0}
snapToInterval={80}
PaginEnabled={Platform.OS==='android'}
snapToAlignment=“中心”
overScrollMode=“从不”
纸卷
内容插图={{
排名：0，
左:0,，
底部：0，
右:0,，
}}
>

下面是我在这个例子中使用的样式：

const styles = StyleSheet.create({
container: {},
view: {
marginTop: 100,
backgroundColor: 'blue',
width: 40,
marginLeft: 40,
height: 20,
borderRadius: 10,
// paddingHorizontal : 30
},
});
      <View style={[styles.view, { backgroundColor: 'red' }]} />
      <View style={styles.view} />
      <View style={[styles.view, { backgroundColor: 'red' }]} />
      <View style={[styles.view, { marginRight: 160, paddingRight: 60        }]} />
    </ScrollView>

const styles=StyleSheet.create({
容器：{}，
视图：{
玛金托普：100，
背景颜色：“蓝色”，
宽度：40，
marginLeft:40，
身高：20，
边界半径：10，
//水平方向：30
},
});

因为滚动碰到了左侧内容的边缘，您无法再向左滚动。有几种方法可以解决这个问题。其中之一是：为左侧和右侧设置

contentInset

。我以前使用过的另一种方法是：您需要根据需要进行一些计算，只需使最左侧的“视图”留有一个边距，这样就可以将文本本身滚动到中心，因为左侧仍然有内容。同样适用于最右边的“视图”

下面是我的代码示例：

           <ScrollView
      ref={(scrollView) => { this.scrollView = scrollView; }}
      style={styles.container}
      horizontal
      decelerationRate={0}
      snapToInterval={80}
      pagingEnabled={Platform.OS === 'android'}
      snapToAlignment="center"
      overScrollMode="never"
      scroll
      contentInset={{
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
      }}
    >

      <View style={[styles.view, { backgroundColor: 'red', marginLeft: 160, paddingLeft: 60 }]} />
      <View style={styles.view} />
      <View style={[styles.view, { backgroundColor: 'red' }]} />
      <View style={styles.view} />
      <View style={[styles.view, { backgroundColor: 'red' }]} />
      <View style={[styles.view, { marginRight: 160, paddingRight: 60 }]} />
    </ScrollView>

{this.scrollView=scrollView；}
style={style.container}
水平的
减速率={0}
snapToInterval={80}
PaginEnabled={Platform.OS==='android'}
snapToAlignment=“中心”
overScrollMode=“从不”
纸卷
内容插图={{
排名：0，
左:0,，
底部：0，
右:0,，
}}
>

下面是我在这个例子中使用的样式：

const styles = StyleSheet.create({
container: {},
view: {
marginTop: 100,
backgroundColor: 'blue',
width: 40,
marginLeft: 40,
height: 20,
borderRadius: 10,
// paddingHorizontal : 30
},
});
      <View style={[styles.view, { backgroundColor: 'red' }]} />
      <View style={styles.view} />
      <View style={[styles.view, { backgroundColor: 'red' }]} />
      <View style={[styles.view, { marginRight: 160, paddingRight: 60        }]} />
    </ScrollView>

const styles=StyleSheet.create({
容器：{}，
视图：{
玛金托普：100，
背景颜色：“蓝色”，
宽度：40，
marginLeft:40，
身高：20，
边界半径：10，
//水平方向：30
},
});