React native 如何在react navigation（3.x）中为全屏模式提供透明背景？

如何在react navigation（3.x）中为全屏模式提供透明背景。给出的解决方案在新版本的react navigation中不起作用。 我想在一个新的全屏模式，是在另一个屏幕上呈现一个透明的颜色

  const MainNavigator = createStackNavigator(
  {
    BrowserHome: { screen: BrowserHome },
    ImageDetailModal: {
      screen: ImageDetail,
      navigationOptions: {
        header: null
      }
    }
  },
  {
    mode: "modal",
    cardStyle: {
      backgroundColor: "transparent",
      opacity: 1
    }
  }
);

const AppContainer = createAppContainer(MainNavigator);

export default AppContainer;

而在“BrowserHome”组件上显示的我的图像细节组件是：

export default class ImageDetail extends React.Component {
  render() {
    const modalColor = this.props.navigation.getParam("modalColor");
    return (
      <View
        style={{ flex: 1, flexDirection: "column", justifyContent: "flex-end" }}
      >
        <View
          style={{
            height: "50%",
            width: "100%",
            backgroundColor: "red",
            justifyContent: "center"
          }}
        >
          <Text>Testing a modal with transparent background</Text>
        </View>
      </View>
    );
  }
}

导出默认类ImageDetail.Component{
render（）{
const modalColor=this.props.navigation.getParam（“modalColor”）；
返回(
在透明背景下测试模态
);
}
}

您现在可以删除

cardStyle

对象，并改为设置

transparentCard:true

：

const MainNavigator = createStackNavigator(
  {
    BrowserHome: { screen: BrowserHome },
    ImageDetailModal: {
      screen: ImageDetail,
      navigationOptions: {
        header: null
      }
    }
  },
  {
    mode: "modal",
    transparentCard: true
  })

---

在createStackNavigator中添加行

透明卡片：true

和

卡片样式：{opacity:1}

const MainStack = createStackNavigator({
  Tabs: TabNavigator,
  Modal: ModalScreen, 
},{
  headerMode: 'none',
  mode: 'modal',
  transparentCard: true,
  cardStyle: { opacity: 1 }
});

反应导航5x 如果您已更新为React导航版本5x，这里有一个更新

代码示例

<Stack.Navigator
  screenOptions={{
    headerShown: false,
    cardStyle: { backgroundColor: 'transparent' },
    cardOverlayEnabled: true,
    cardStyleInterpolator: ({ current: { progress } }) => ({
      cardStyle: {
        opacity: progress.interpolate({
          inputRange: [0, 0.5, 0.9, 1],
          outputRange: [0, 0.25, 0.7, 1],
        }),
      },
      overlayStyle: {
        opacity: progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 0.5],
          extrapolate: 'clamp',
        }),
      },
    }),
  }}
  mode="modal"
>
  <Stack.Screen name="Home" component={HomeStack} />
  <Stack.Screen name="Modal" component={ModalScreen} />
</Stack.Navigator>

({
卡片样式：{
不透明度：progress.interpolate({
输入范围：[0,0.5,0.9,1]，
输出范围：[0,0.25,0.7,1]，
}),
},
覆盖样式：{
不透明度：progress.interpolate({
输入范围：[0，1]，
输出范围：[0,0.5]，
外推：“夹具”，
}),
},
}),
}}
mode=“模态”
>

---

这里的属性

cardeoverlayenabled

和

headersown

是可选的。这取决于你想要达到的目标。

你知道如何使用透明背景了吗？任何地方的答案似乎都与版本不符3@Felipe在我的例子中，我使用了react native modal，但是您可以在这里检查问题，您可以在下面找到完整的示例：