在React Native中更改View的背景颜色时,我遇到了问题,{Foot Element}中的backgroundColor
属性在其他元素中工作正常。
在Image Snapshot中,页脚元素的两个顶部边框中显示白色。如何从那里去除白色
</View>
</ScrollView>
<View style={styles.footer}>
</View>
</View>
footer:{
flexDirection:"row",
height:80,
borderTopLeftRadius:20,
borderTopRightRadius:20,
backgroundColor:"black",
}
答案 0 :(得分:1)
您可以使用
return (
<View style={styles.gridItem}>
<TouchableOpacity style={{ flex: 1 }} onPress={props.onSelect}>
<View style={styles.container} >
<Text style={styles.title} numberOfLines={2}>
{props.title}
</Text>
</View>
</TouchableOpacity>
</View>
);
};
export default CategoryGridTitle;
const styles = StyleSheet.create({
gridItem: {
flex: 1,
margin: 15,
height: 150,
borderRadius: 10,
overflow: "hidden",
},
container: {
flex: 1,
borderRadius: 10,
shadowColor: "black",
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 10,
elevation: 3,
padding: 15,
justifyContent: "flex-end",
alignItems: "flex-end",
backgroundColor: '#ff6f00'
},
title: {
fontFamily: "open-sans-bold",
fontSize: 18,
textAlign: "right",
},
});
答案 1 :(得分:0)
使用下面的道具使react-native-elements中的背景变为红色。
buttonStyle={{backgroundColor: 'red'}}
您应该使用prop buttonStyle在react-native-elements中编辑按钮的样式。
这是工作代码。这里的按钮是红色的。
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<Button
title='Login'
buttonStyle={{
backgroundColor:'red'
}}
/>
</View>
);
}
}
这是一个有效的代码,https://snack.expo.io/BkRgH0_HE
答案 2 :(得分:0)
用另一个与顶部View组件背景相同的View包裹页脚。
赞:
<View style={{backgroundColor: "orange"}}>
<View style={styles.footer}>
...
</View>
</View>