Reactjs React本地平面列表示例
如何处理REACT NATIVE FLATLIST中的大量数据 是否有人可以提供使用React Native Flatlist的ScrollToIndex的示例 我正在使用ScrollToIndex和getItemLayout,但它不起作用 我的平面列表上有185个项目,当我调用ScrollToIndex(150)时,没有结果 我曾与谷歌合作获取ScrollToIndex示例,但什么都没有 谢谢你的帮助 这是我的密码:Reactjs React本地平面列表示例,reactjs,react-native,react-native-ios,react-native-flatlist,Reactjs,React Native,React Native Ios,React Native Flatlist,如何处理REACT NATIVE FLATLIST中的大量数据 是否有人可以提供使用React Native Flatlist的ScrollToIndex的示例 我正在使用ScrollToIndex和getItemLayout,但它不起作用 我的平面列表上有185个项目,当我调用ScrollToIndex(150)时,没有结果 我曾与谷歌合作获取ScrollToIndex示例,但什么都没有 谢谢你的帮助 这是我的密码: <FlatList ref={ref =>
<FlatList
ref={ref => setFlatListRef(ref)}
// getItemLayout={getItemLayout}
data={markers}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={() => <Separator color={colors.separator} />}
renderItem={renderItem}
style={{ flex: 1 }}
getItemLayout={getItemLayout}
}
显示调用scrollToIndex()的代码,并显示设置FlatList“ref”没有问题的代码。我将编辑我的问题。显示调用scrollToIndex()的代码,并显示设置平面列表“ref”没有问题的代码。我将编辑我的问题。
const getItemLayout = (data, index) => {
return {
length: 120,
offset: 120 * index,
index
}
const renderItem = ({ item }) => <MyListItem {...props} item={item} />
if (this.props.item.minCost == 0 && this.props.item.maxCost == 0) {
cost = 'Guide price: Free'
} else if (
this.props.item.minCost == this.props.item.maxCost &&
this.props.countries[this.props.item.countryID] &&
this.props.countries[this.props.item.countryID].currencySymbol
) {
cost =
`Guide price: ` +
entities.decode(
this.props.countries[this.props.item.countryID].currencySymbol
) +
`${this.props.item.minCost.toFixed(2)}`
} else {
if (
this.props.countries[this.props.item.countryID] &&
this.props.countries[this.props.item.countryID].currencySymbol
) {
cost =
`Guide price from` +
entities.decode(
this.props.countries[this.props.item.countryID].currencySymbol
) +
`${this.props.item.minCost.toFixed(2)} to` +
entities.decode(
this.props.countries[this.props.item.countryID].currencySymbol
) +
`${this.props.item.maxCost.toFixed(2)}`
}
}
}
return (
<TouchableOpacity
style={{
padding: 5,
height: 120,
backgroundColor:
this.props.selectedMarkerID !== this.props.item.ID.toString()
? '#fff'
: colors.separator
}}
activeOpacity={1}
onPress={() => this.props.selectItem(this.props.item)}
>
<Text style={{ fontWeight: 'bold', fontSize: 13 }}>
{this.props.item.Name}
</Text>
<Text style={{ marginTop: 1, fontSize: 12 }}>
{this.props.item.desc}
</Text>
<Text style={{ marginTop: 1, fontSize: 12 }}>
{this.props.markerTypes ? (
this.props.markerTypes[this.props.item.Type].ShortDescription
) : (
''
)}
</Text>
<View style={{ flexDirection: 'row', marginTop: 5 }}>
<View style={{ marginRight: 2 }}>
<MyCustomMarker
source={{ url: markerTypesImages[this.props.item.Type] }}
style={{ width: 25, height: 30 }}
userFavourites={this.props.userFavourites}
Type={this.props.item.Type}
markerID={this.props.item.ID}
/>
<Image
source={{ url: images.compass }}
style={{
marginTop: 2,
width: 20,
height: 20,
marginLeft: 5,
transform: [
{ rotate: `${this.props.item.rotate.toString()}deg` }
]
}}
/>
<Text style={{ fontSize: 9 }}>{this.props.item.distance}km</Text>
</View>
{this.props.item.thumb === '' ? (
<Image
source={{ url: images.noThumb }}
style={{ flex: 0.2, width: 84, height: 65 }}
/>
) : (
<Image
source={{
url: `${this.props.url}${this.props.item.thumb}`
}}
style={{ flex: 0.2, width: 80, height: 60 }}
/>
)}
<View style={{ flex: 0.5 }}>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{Object.keys(facilities).map((key, i) => {
if (this.props.item[key] === 1) {
return (
<View
style={{
width: 26,
height: 26,
padding: 2,
margin: 2,
alignItems: 'center',
borderRadius: 3,
borderWidth: 1,
borderColor: colors.dark,
backgroundColor: 'white'
}}
key={key}
>
<Image
source={{ url: facilities[key] }}
style={{ width: 20, height: 20 }}
/>
</View>
)
}
return null
})}
</View>
<StarRatingBar
continuous={true}
score={this.props.item.score / 2}
allowsHalfStars={true}
accurateHalfStars={true}
dontShowScore={true}
/>
<View>
{cost ? <Text style={{ fontSize: 12 }}>{cost}</Text> : null}
{this.props.item.open ? (
<Text style={{ color: this.props.item.style, fontSize: 12 }}>
{this.props.item.open}
</Text>
) : null}
</View>
</View>
</View>
</TouchableOpacity>
)
if (index >= 0) {
this.setState({ selectedIndex: index })
setTimeout(() => {
this.state.flatListRef.scrollToIndex({
index,
viewPosition: 0.5
})
}, 100)
}