布局
适配模式
在编辑器中创作的 Rive 图形不一定与运行时渲染的容器大小匹配。我们需要确定此场景的行为，因为没有一种尺寸适合所有情况。
解决方案是选择适配模式（Fit Mode）。这在容器上指定，控制 Rive 如何缩放。
Layout：使用 Rive 布局引擎对画板应用响应式布局，匹配容器尺寸。要实现此功能，画板必须在设计时考虑到了布局。参见响应式布局了解更多信息。Contain：（默认） 保持宽高比并缩放画板，使其较大尺寸与容器的相应尺寸匹配。如果宽高比不完全相同，将在较短尺寸的轴上留下空间。ScaleDown：保持宽高比，当画板大于容器时表现类似Contain。否则，使用画板的原始尺寸。Cover：保持宽高比并缩放画板，使其较小尺寸与容器的相应尺寸匹配。如果宽高比不完全相同，将在较大尺寸的轴上裁剪画板。FitWidth：保持宽高比并缩放画板宽度以匹配容器宽度。如果画板和容器的 宽高比不匹配，将导致垂直裁剪或垂直轴上的空间。FitHeight：保持宽高比并缩放画板高度以匹配容器高度。如果画板和容器的宽高比不匹配，将导致水平裁剪或水平轴上的空间。Fill：不保持宽高比，拉伸到容器尺寸。None：不缩放。使用画板的原始尺寸。对于任一维度，如果画板尺寸较大，将被裁剪。如果较小，将留下空间。
对齐
在除 Layout 和 Fill 之外的所有选项中，Rive 图形可能在其容器内被裁剪或留下空间。对齐方式决定内容在容器内的对齐方式。以下选项可用：
TopLeftTopCenterTopRightCenterLeftCenter（默认）CenterRightBottomLeftBottomCenterBottomRight
边界
此运行时通过提供最小和最大 x 和 y 坐标来暴露 Rive 内容渲染区域的边界尺寸。这些坐标相对于容器，所有坐标都必须提供。这些将覆盖对齐设置。
minXminYmaxXmaxY
应用适配模式
新版运行时（推荐）
直接在 RiveView 组件上为 Fit 和 Alignment 设置布局属性。参见适配模式和对齐了解所有枚举选项。
import {
Alignment,
Fit,
RiveView,
useRiveFile,
} from '@rive-app/react-native';
export default function LayoutExample() {
const { riveFile } = useRiveFile(
require('path/to/file.riv')
);
return (
<View style={styles.container}>
{riveFile ? (
<RiveView
file={riveFile}
style={styles.rive}
fit={Fit.Contain}
alignment={Alignment.Center}
/>
) : null}
</View>
);
}
旧版运行时
直接在 Rive 组件上为 Fit 和 Alignment 设置布局属性。参见适配模式和对齐了解所有枚举选项。
import Rive, { Alignment, Fit } from 'rive-react-native';
export default function Simple() {
return (
<ScrollView>
<Rive
fit={Fit.Cover}
alignment={Alignment.TopCenter}
resourceName="truck_v7"
/>
</ScrollView>
);
};
响应式布局
Rive 的布局功能让您可以设计具有内置响应行为的可调整大小的画板，从编辑器配置。确保在运行时将适配模式设置为 Layout，画板将根据编辑器中定义的约束调整大小以填充其容器。
您可以选择提供布局缩放因子来乘以内容的缩放比例。这允许在容器内微调视觉大小。此属性仅在将 Fit 模式设置为 Layout 时适用。
有关更多编辑器信息以及如何配置图形，请参见布局概述。
新版运行时（推荐）
步骤
- 将
fit设置为Fit.Layout— 这将自动缩放和调整画板大小以匹配视图大小。 - 可选择设置
layoutScaleFactor以手动控制画板大小（缩放因子）。如果未设置，图形将使用设备的 DPI 进行缩放。
export default function ResponsiveLayoutsExample() {
const { riveFile, isLoading, error } = useRiveFile(
require('path/to/file.riv')
);
const [scaleFactor, setScaleFactor] = useState(4.0);
const riveRef = useRef<RiveViewRef>(null);
const { width, height } = useWindowDimensions();
useEffect(() => {
riveRef.current?.playIfNeeded();
}, [width, height]);
const increaseScale = () => {
setScaleFactor((prev) => prev + 0.5);
riveRef.current?.playIfNeeded();
};
const decreaseScale = () => {
setScaleFactor((prev) => Math.max(0.5, prev - 0.5));
riveRef.current?.playIfNeeded();
};
return (
<View style={styles.container}>
{isLoading ? (
<ActivityIndicator size="large" color="#0000ff" />
) : error ? (
<Text style={styles.errorText}>{error?.message}</Text>
) : riveFile ? (
<RiveView
hybridRef={{ f: (ref) => (riveRef.current = ref) }}
file={riveFile}
fit={Fit.Layout}
layoutScaleFactor={scaleFactor}
style={styles.rive}
autoPlay={true}
/>
) : null}
<View style={styles.controls}>
<Text style={styles.label}>Layout Scale Factor</Text>
<View style={styles.scaleControls}>
<Button title="-" onPress={decreaseScale} />
<View style={styles.scaleText}>
<Text>{scaleFactor.toFixed(1)}x</Text>
</View>
<Button title="+" onPress={increaseScale} />
</View>
</View>
</View>
);
}
调用
playIfNeeded()确保图形在更改后视觉更新。未来这将自动处理。
旧版运行时
示例
步骤
- 将
fit设置为Fit.Layout— 这将自动缩放和调整画板大小以匹配画布大小。 - 可选择在
Layout对象中设置layoutScaleFactor以手动控制画板的缩放因子。 - React Native 运行时自动处理窗口大小调整和设备像素比变化。
import Rive, { Fit } from 'rive-react-native';
const resourceName = 'layout_test';
export default function ResponsiveLayout() {
return (
<Rive
autoplay={true}
fit={Fit.Layout}
layoutScaleFactor={0.5} // 如果不设置此项（或设置为 "-1.0"），Rive 将自动缩放布局以匹配设备像素比
resourceName={resourceName}
artboardName={'Artboard'}
stateMachineName={'State Machine 1'}
/>
);
}