如何在 Material Top Tab Navigator 中为屏幕添加静态背景图像？答案

【问题标题】：How to add a static background image for screens in Material Top Tab Navigator?如何在 Material Top Tab Navigator 中为屏幕添加静态背景图像？
【发布时间】：2020-10-21 02:16:56
【问题描述】：

我使用 react-navigation 中的 createMaterialTopTabNavigator 创建了两个选项卡。我喜欢为两个选项卡设置一个背景图片。

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

【问题讨论】：

标签： react-native react-navigation tabnavigator imagebackground

【解决方案1】：

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

将标签设置为具有透明背景，并将背景图像设置在导航器上方的<View> 上。您可以在 React Navigation 文档 here 中找到有关样式卡的详细信息。
第二种选择，也是我认为更优雅的选择，是使用专用库来管理 React Navigation 中的转换。那里有一些，但我个人使用过Fluid Transitions，我喜欢它。如果您决定使用这个库，您可以在 StackNavigator 视图中设置背景图像。你需要添加一个shared 道具，你就完成了:)

【讨论】：

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

【解决方案2】：

这里是演示：https://snack.expo.io/@nomi9995/e05080

使用 react-native-tab-view 并将 TabView 包装在 ImageBackground 中的更好方法

yarn add react-native-tab-view

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({});

【讨论】：

抱歉回复晚了。谢谢！！这解决了我的问题