现在我正在使用下面的代码设置背景图像，其中创建一个额外的图像视图来设置图像视图并且它工作正常。
<View>
<Image
style={{
height:67 ,
width: width}
source={Images.header_bachkground}/>
</View>
现在我的问题是：有没有办法直接在视图上设置背景图像：
<View
style={{
height:67 ,
width: width}
source={Images.header_bachkground}>
</View>
上面的代码对我不起作用。
【问题讨论】：
标签： reactjs layout react-native background-image
不推荐使用<Image /> 作为父组件来嵌套子组件，并且很快就会抛出错误（在撰写本文时）。请改用<ImageBackground />。您可以在 ImageBackground 中嵌套任何内容。你可以传递给<Image />的所有道具都可以传递给这个。
请参考this。
【讨论】：
对此有两种方法。一种是将所有内容放在开始和结束<Image> 标签之间。另一种是使用布局属性。参考这个链接：https://medium.com/reactnative/background-images-in-react-native-191f3ed95a45
第一种方式是使用<Image>作为容器。将您的内容放在<Image> 和</Image> 之间。一定要设置内容的backgroundColor: 'transparent'。我认为Android默认提供它，但iPhone没有。因此，为了保持一致性，我们需要明确声明它。 React Native 会警告你这样做。它很快就会变成一个错误。所以，我推荐后一种方式。
const remote = 'https://s15.postimg.org/tw2qkvmcb/400px.png';
export default class BackgroundImage extends Component {
render() {
const resizeMode = 'center';
const text = 'This is some text inlaid in an <Image />';
return (
<Image
style={{
backgroundColor: '#ccc',
flex: 1,
resizeMode,
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
}}
source={{ uri: remote }}
>
<Text
style={{
backgroundColor: 'transparent',
textAlign: 'center',
fontSize: 30,
padding: 40,
}}
>
{text}
</Text>
</Image>
);
}
}
第二种方法是使用布局属性。在容器中获取<View> 并设置{position:'absolute', width: '100%', height: '100%'}。在这个<View> 中插入<Image> 并设置flex: 1。您可能还想添加resizeMode。现在在同一个容器中写一个兄弟<View> 并设置{flex: 1, backgroundColor: 'transparent'}。在这个兄弟<View> 中放置您的内容。您可能希望为<Image> 或兄弟<View> 设置opacity。
示例如下：
const remote = 'https://s15.postimg.org/tw2qkvmcb/400px.png';
export default class BackgroundImage extends Component {
render() {
const resizeMode = 'center';
const text = 'I am some centered text';
return (
<View
style={{
flex: 1,
backgroundColor: '#eee',
}}
>
<View
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
}}
>
<Image
style={{
flex: 1,
resizeMode,
}}
source={{ uri: remote }}
/>
</View>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'center',
}}
>
<Text
style={{
textAlign: 'center',
fontSize: 40,
}}
>
{text}
</Text>
</View>
</View>
);
}
}
【讨论】：
如下构造你的代码：
...
<Image
source={require('./images/index.jpeg')}
style={styles.container}>
<View>
<Text>
Welcome to React Native Maulik !
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
</Image>
...
你的风格应该像下面这样：
const styles = StyleSheet.create({
container: {
flex: 1,
width: undefined,
height: undefined,
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
},
});
【讨论】：
您不能将图像背景设置为视图。尝试将<Image> 添加为所有内容视图的父级，如下所示
<Image source={require('image!background')} style={styles.container}>
... Your Content ...
</Image>
参考这个SO thread
【讨论】：
我认为在 ReactNative 中用于管理图像和其他媒体使用组件 <Image />。我在文档组件中读到 <View> 旨在构建 UI。但是，也许如果您将组件<Image /> 用作组件props 中的props，我认为这是可能的。
或者如果你想了解 ReactNative 中的背景图片，我建议你阅读这篇文章：
希望我的回答能给你一个想法。快乐编码！
【讨论】：
这是最简单也是最受青睐的方法！
<ImageBackground
source={require("../Assets/splash.png")}
style={{width: '100%',opacity:0.95, height: '100%',justifyContent:"center",alignContent:"center",alignItems: "center"}}
>
<View style={styles.InfoText}>
<Text style={{ textAlign: "center",color:'white', letterSpacing: 1.0,
lineHeight: 15 }}> Hello {user.email},</Text>
</View>
</ImageBackground>
这一定可以解决问题。不要忘记从应用顶部的 react native 导入图像背景！
这是 react native 的新增功能！
【讨论】：