Description
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 151.48 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.11.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5014246
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1
Description
i am using FlatList to custom a time indicator to show the time left,
but there are gaps between FlatList items in high resolution phone, no matter in emulator or real phone
Reproducible Demo
<ImageBackground
style={{ height: this.screenHeight * 0.22, width: '100%', alignItems: 'center' }}
source={require('../../../../images/img_cardBgTop.png')}
resizeMode="stretch"
>
<Text style={styles.title2}>电子停车卡</Text>
<Text style={[styles.text, { marginVertical: 5 }]}>卡号：{cardNo}</Text>
<View style={{ height: 20, marginTop: 5 }}>
<FlatList
data={this.timeIndicatorData}
renderItem={this.renderTimeBlock}
horizontal
keyExtractor={i => i}
/>
</View>
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text style={styles.text}>剩余：{parseInt(remainSeconds / 3600, 10)}小时{(parseInt(remainSeconds / 60, 10)) % 60}分{remainSeconds % 60}秒（截至{endDate}）</Text>
</View>
</ImageBackground> renderTimeBlock = ({ item, index }) => {
const { usedTimePercent } = this.state;
return (
<View
style={{
width: 3,
height: 10,
backgroundColor: index < usedTimePercent ? 'white' : color.newEnergy,
marginRight: ((index + 1) % 25) === 0 ? 1 : 0,
borderTopLeftRadius: index === 0 ? 5 : 0,
borderTopRightRadius: index === this.timeIndicatorData.length - 1 ? 5 : 0,
borderBottomLeftRadius: index === 0 ? 5 : 0,
borderBottomRightRadius: index === this.timeIndicatorData.length - 1 ? 5 : 0,
borderTopWidth: 1,
borderBottomWidth: 1,
borderLeftWidth: (index % 25) === 0 ? 1 : 0,
borderRightWidth: (index + 1) % 25 === 0 ? 1 : 0,
borderColor: color.newEnergy,
}}
/>
);
};