小编aus*_*inw的帖子

有谁知道你是否可以react-bootstrap与 Next.js 一起使用？我正在使用两者的最新版本，此时我可以提供代码，但现在我的应用程序没有抛出任何错误，它只是没有注册我的任何react-bootstrap组件。也许有一些我无法在互联网上找到的技巧？如果有帮助，我可以提供代码或文件结构。提前致谢！

下一个.config.js

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
    /* my next config */
})

页面/index.js

import Badge from 'react-bootstrap/Badge';
import "../public/css/bootstrap.css";
const Index = () => (
    <div>
        <p className='display-4'>Hello</p>
        <Badge>Heading</Badge>
    </div>
)

export default Index;

包.json

{
  "name": "vacation-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "next": "^9.1.1",
    "react": "^16.10.2",
    "react-bootstrap": "^1.0.0-beta.14", …

我的 MaterialContainerTransform 转换是从源 -> 目标进行的，但反之则不然。我的情况非常标准——我试图提供从 RecyclerView 项目（源片段）到“详细信息”片段（目标片段）的简单转换。RecyclerView 中的项目是 MaterialCardView，每个都有一个在目标 Fragment 中共享的 ImageView。

遵循这些文档https://material.io/develop/android/theming/motion似乎相当简单，尽管文档是用 Kotlin 编写的并且我使用的是 Java，所以也许我遗漏了一些东西？我在每个 RecyclerView 项中动态设置 ImageView 过渡名称，并将其传递到目标 Fragment，然后目标 Fragment 将过渡名称复制到其自己的 ImageView。通过日志记录，我可以确认每个片段中的共享transitionName 匹配。

从源 -> 目标的转换效果很好，但是当我点击后退按钮时，没有转换回来。这很奇怪，因为即使文档也声明：

片段能够定义进入和返回共享元素转换。当只设置了一个进入共享元素transition时，当Fragment弹出（返回）时会重新使用它。

有什么想法为什么返回转换（目标 -> 源）不起作用？这是相关代码：

RecyclerView Item (Source) **ImageView 是共享元素

<com.google.android.material.card.MaterialCardView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/result_layout_card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="5dp"
    app:cardElevation="4dp"
    android:layout_margin="8dp"
    android:clickable="true"
    android:focusable="true"
    android:checkable="true"
    app:checkedIconTint="@color/checkedYellow"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_gravity="center">


        <ImageView
            android:id="@+id/result_image_thumbnail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:contentDescription="@string/thumbnail_content_description"
            android:src="@drawable/corolla_preview"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/result_text_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2018 Toyota Corolla"
                style="@style/TextAppearance.MaterialComponents.Subtitle1" …