React native 如何在“材质顶部”选项卡导航器中为屏幕添加静态背景图像？

我已经使用react navigation中的createMaterialTopTabNavigator创建了两个选项卡。我想有一个单一的背景图像为两个标签

---

当前的行为是，当我从tab1滑动到tab2时，图像也会转换，但我喜欢在从tab1转换到tab2时背景图像是静态的，在滑动时，只有要转换的选项卡的内容。我已尝试将TabNavigator包装到ImageBackground组件中，但这没有用。

我认为您可以使用以下解决方案之一：

将选项卡设置为透明背景，并将背景图像设置在导航器上方的

上。您可以在React导航文档中找到有关样式卡的详细信息

第二个选择，也是我认为更优雅的选择，是使用专用库来管理React导航中的转换。有一些，但我个人用过，我喜欢它。如果决定使用此库，可以在StackNavigator视图中设置背景图像。您需要添加一个

共享的
道具，您将完成：）

以下是演示：

在

ImageBackground

yarn add react-native-tab-view

import React，{Component}来自“React”；
进口{
文本，
样式表，
看法
安全区域视图，
图像背景，
尺寸，
}从“反应本族语”；
从“反应本机选项卡视图”导入{TabView，SceneMap}；
const width=Dimensions.get（“窗口”）.width；
函数FirstRoute（）{
返回(
第一条路！
);
}
函数SecondRoute（）{
返回(
第二条路！
);
}
导出默认类应用程序扩展组件{
状态={
索引：0，
路线：[
{键：“第一”，标题：“第一”}，
{键：“第二”，标题：“第二”}，
],
};
render（）{
const{index，routes}=this.state；
const renderScene=SceneMap({
第一条：第一条路线，
第二条：第二条路线，
});
返回(
this.setState（{index:i}）}
tabBarPosition=“底部”
/>
);
}
}
constyles=StyleSheet.create（{}）；

很抱歉回复太晚，感谢您提供的解决方案，但这两种方案对我都不起作用。第一个解决方案仅适用于堆栈导航器，createMaterialTopTabNavigator没有该选项。同样对于第二个解决方案，我认为流体转换只支持高达react navigation v3，但我使用的是react navigation v5。最后一次提交是在15个月前，很抱歉回复太晚。谢谢这解决了我的问题

import React, { Component } from "react";
import {
  Text,
  StyleSheet,
  View,
  SafeAreaView,
  ImageBackground,
  Dimensions,
} from "react-native";
import { TabView, SceneMap } from "react-native-tab-view";
const width = Dimensions.get("window").width;

function FirstRoute() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>FirstRoute!</Text>
    </View>
  );
}

function SecondRoute() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>SecondRoute!</Text>
    </View>
  );
}

export default class App extends Component {
  state = {
    index: 0,
    routes: [
      { key: "first", title: "First" },
      { key: "second", title: "Second" },
    ],
  };
  render() {
    const { index, routes } = this.state;
    const renderScene = SceneMap({
      first: FirstRoute,
      second: SecondRoute,
    });
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <ImageBackground
          style={{ flex: 1, width: width }}
          source={{
            uri:
              "https://firebasestorage.googleapis.com/v0/b/ielts-preps.appspot.com/o/1592920135765?alt=media&token=ec911583-06f9-4315-b66c-cf47de120e85",
          }}
        >
          <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={(i) => this.setState({ index: i })}
            tabBarPosition="bottom"
          />
        </ImageBackground>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({});