t;
<View style={[styles.stars, styles.active, { width: activeStarsWidth }]}>
{activeStars.map(item => item)}
</View>
<View style={styles.stars}>
{defaultStars.map(item => item)}
</View>
</View>
)
}
}
const styles = StyleSheet.create({
rates: {
flexDirection: 'row',
position: 'relative'
},
stars: {
flexDirection: 'row',
alignItems: 'center',
overflow: 'hidden',
flexGrow: 0
},
active: {
position: 'absolute',
zIndex: 200,
left: 0,
top: 0
}
});
开发电影海报组件
海报组件开发需要注意的是：
点击电影海报，跳转详情页面，跳转逻辑都是一样的，所以可以不用自定义事件的方式跳转，直接在组件里面调用 this.props.navigation.push 进行跳转。页面在 router 里注册后可以直接使用 this.props.navigation.push，但是组件不行。在组件中，想要使用 navigation 进行跳转，要么是使用自定义属性，将 navigation 传入组件，要么使用 react-navigation 提供的 withNavigation翻翻，withNavigation(component) 返回一个 render 函数，默认将 navigation 作出自定义属性传入组件。
有些海报图片背景纯白，和页面背景融合了，看不到边界，所以需要给他设置 border，由于 Image 组件不能设置 border，所以这里需要使用 ImageBackground 组件。
title 只能为一行，产出部分省略，需要加一个 numberOfLines={1} 的属性。
import React, { Component } from 'react';
import { Text, View, StyleSheet, ImageBackground, TouchableWithoutFeedback } from 'react-native';
import PropTypes from 'prop-types';
import { withNavigation } from 'react-navigation';
import { px } from '../utils/device';
import Rate from './rate';
class MoviesItem extends Component {
constructor(props) {
super(props);
}
static propTypes = {
data: PropTypes.object
}
render() {
const { data, navigation } = this.props;
const { id, title, cover, rating, null_rating_reason } = data;
return (
<TouchableWithoutFeedback onPress={() => navigation.push('Detail', { id })}>
<View style={styles.page}>
<ImageBackground source={{ uri: cover.url }} style={styles.img}></ImageBackground>
<Text style={styles.title} numberOfLines={1}>{title}</Text>
{rating ? (
<View style={styles.rate}>
<Rate value={rating.value / 2} size={px(20)} margin={px(4)} />
<Text style={styles.rateText}>{rating.value.toFixed(1)}</Text>
</View>
) : (
<Text style={styles.rate}>{null_rating_reason}</Text>
)}
</View>
</TouchableWithoutFeedback>
)
}
}
export default withNavigation(MoviesItem);
const styles = StyleSheet.create({
page: {
width: px(160)
},
img: {
width: px(160),
height: px(224),
overflow: 'hidden',
borderRadius: px(8),
borderWidth: 1,
borderStyle: 'solid',
borderColor: '#f8f8f8'
},
title: {
fontSize: px(28),
fontWeight: '600',
color: '#333',
marginTop: px(12),
lineHeight: px(40)
},
rate: {
flexDirection: 'row',
alignItems: 'center'
},
rateText: {
fontSize: px(24),
color: '#999',
marginLeft: px(6)
}
});
使用
