我正在尝试设计组件,但无法弄清楚如何做一些事情。 1)我想将背景颜色应用到我的组件的100%
return (
<TouchableWithoutFeedback
style={styles.touchable}
onPress={() =>
this.props.navigation.navigate('Quotes', { name: this.props.name })}
>
<View style={styles.viewStyle}>
<Image
source={this.props.image}
key={this.props.image}
style={styles.imageStyle}
/>
<Text style={styles.textStyle}> {this.props.name} </Text>
</View>
</TouchableWithoutFeedback>
);
}
}
const styles = {
imageStyle: {
height: 100,
width: 100
},
touchable: {
width: '100%',
backgroundColor: 'black'
},
viewStyle: {
height:100,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
backgroundColor: 'black'
},
textStyle: {
marginLeft: 20,
width: 120,
fontWeight: 'bold',
fontSize: 15
}
}
我尝试将背景颜色应用于触摸标记视图标记,但这些都不起作用。 此外,我喜欢使用justifyContent:flex-start将我的图像定位在组件的左上角。但是我在view标签中的元素始终保持居中。
父组件是:
render() {
const {listStyle} = styles
return (
<ScrollView style={listStyle}>
{this.renderCharacters(this.props.matches)}
</ScrollView>
);
}
}
const styles = {
listStyle: {
width: '100%',
height: '100%'
}
}