在 React Native 里面，没有单独设置背景图像的属性 … 我们可以使用 Image 组件，把它要显示的图像作为一个背景 .. 改造一下这个 Image … 把这个自关闭标签，换成带开始还有结束的 Image 标签 … 这样在它们之间可以添加要包装的东西 … Image 上要显示的图像，会作为包装的东西的背景图像 …

单独再去设计一个样式 … 可以是 backgroundImage … 下面再去定义一下这个 backgroundImage 样式 … 在上面使用一个 flex 属性，它的值设置成 1 ..

保存 .. 出现了一个错误 .. 因为这个样式的后面没有逗号 ... 再保存 .. 回到模拟器 .. ESC .. 再按一下 command + R 刷新一下屏幕 ..

现在屏幕上会满屏显示这张电影海报 ..

跟背景图像相关的还有一个 resizeMode 属性，它可以设置背景图像的缩放的类型 .. 你可以直接这个属性放到 Image 上面去用，也可以放到这个样式里面 .. 添加一个 resizeMode … 它的值可以是 contain … 包含 … 也可以是 stretch … 拉伸 … 注意拉伸可能会影响到图像的显示比例 …

或者也可以是 cover … 这里我们先把它设置成 cover ..

再给这个 Image 添加点要包装的东西 … 一组 View 标签 … 里面是两个 Text 标签 .. command + shift + E .. 展开这个缩写形式 ..

View>Text*2

在这个 View 标签上面添加一个样式 … 名字是 styles.overlay … overlay 是覆盖的意思，一会儿我们在这个样式上面添加一个半透明的背景 …

再给下面这个 Text 添加一个样式 .. style ... 设置成 styles.overlayHeader ... 这个 Text 里面的内容是一个大标题 .. 机器人总动员 …

它的下面是一个副标题 .. 在上面应用一个样式 .. 名字是 styles.overlaySubHeader ... 再添加点文字 .. Wall · E ( 2008 ) ..

再去定义这些样式 .. 先添加一个 overlay … 里面用一个 backgroundColor .. 设置一下背景颜色 .. 它的值可以使用一个 rgba .. 带透明通道使用 rgb 表示的颜色 … 使用的是黑色 … 再设置一下不透明度 … 逗号分隔一下 .. 另起一行 . 再用一个 alignItems .. 设置一下它里面的东西的对齐方式 … 这里设置成 center …

overlay: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
alignItems: 'center',
},

然后再设置一下 overlay 里的文字的样式 … 先去定义一下 overlayHeader .. fontSize .. 设置一下字号 .. 值是 33 ... fontFamily … 设置一下文字的字体 … 再去修改一下文字的粗线 .. 用的是 fontWeight .. 设置成 200 .. 然后是文字的颜色 … 可以使用 color 这个属性 … '#eae7ff’, 最后再添加一个内边距 .. padding … 设置成 10 ..

overlayHeader: {
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#eae7ff',
padding: 10,
},

最后再添加一个 overlaySubHeader … overlay 里面的副标题的样式 .. fontSize 设置一下字号 .. 这里设置成 16 … 再修改一下文字的字体 .. fontFamily … Helvetica Neue … 再把 fontWeight 设置成 200 … 修改一下文字的颜色 … color … #eae7ff .. 添加一个内边距 … 可以使用 padding … 它的值设置成 10 … 然后我们可以再去掉上边的这个内边距 … 用一个 paddingTop … 它的值设置成 0 ...

overlaySubHeader: {
fontSize: 16,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#eae7ff',
padding: 10,
paddingTop: 0,
},

在屏幕上你会看到一个背景图像 .. .上面覆盖了一层文字 … 文字的后面也有一个半透明的黑色的背景 …