react-native - React Native 测试 android 和 ios 组件
问题描述
我有一个这样的代码:
function AppContainerAndroid() {
return <App />;
}
function AppContainerIOS() {
return (
<SafeAreaProvider testID="ios_area_provider">
<App />
</SafeAreaProvider>
);
}
function RenderProperContainer({renderProps}) {
return renderProps();
}
export default function AppContainer() {
return (
<RenderProperContainer
renderProps={() => {
if (Platform.OS === 'android') {
return <AppContainerAndroid />;
}
return <AppContainerIOS />;
}}
/>
);
}
和一个看起来像这样的测试。
it('should render android platform', () => {
setPlatform('android');
const {getByTestId} = render(<AppContainer />);
const element = getByTestId('ios_area_provider');
console.log(element);
});
当我运行测试时,我收到一条错误消息
做了一些搜索,我得到的大部分答案都说这与我返回组件的方式有关。似乎它不允许有条件返回,因为我已经尝试过:
export default function AppContainer() {
if(Platform.OS === 'android') {
return <AppContainerAndroid />
}
return <AppContainerIOS />
}
和
export default function AppContainer() {
return Platform.OS === 'android' ? (
<AppContainerAndroid />
) : (
<AppContainerIOS />
);
}
并得到同样的错误。有没有办法处理这种情况?
更新:<App />
由于某种原因,我的反应导航中的某处导致了这个问题,因为<WrapWithProvider><View /></WrapWithProvider>
工作得很好,测试通过了。
function App() {
return (
<WrapWithProvider>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen>
{() => <View />}
</Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
</WrapWithProvider>
);
}
解决方案
也许您可以尝试使用 if ios 代替。
就像是:
return Platform.OS === 'ios' ? <AppContainerIOS /> : <App />;
更新
试试这个没有SafeAreaView
:
SafeAreaView 的目的是在设备的安全区域边界内呈现内容。目前仅适用于 iOS 版本 11 或更高版本的 iOS 设备。
并且Stack.Screen
没有设置组件。
function App() {
return (
<WrapWithProvider>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="landing_page" options={{headerShown: false}} component={landing_page}/>
</Stack.Navigator>
</NavigationContainer>
</WrapWithProvider>
);
}
推荐阅读
- java - 如何使用 engine.load() 加载下一个 URL
- amazon-web-services - 当来自 AWS API Gateway 的 API 超时或出现错误时发送 Slack 警报
- java - JOOQ:在通用界面中对来自不同表的列进行逻辑分组
- c# - C# .Net 使用某些 PixelFormat 调用 Graphics.FromImage(myBitmap) 会引发内存不足异常
- javascript - 无法将 javascript 从 html 文件移动到 js 文件并将其导入 application.js - rails
- node.js - 在 node.js 中,为什么 EventEmitter 作为循环引用包含在事件中?
- python - SQLite 如何按列值分隔表?
- c# - 嵌套的 Gridview、祖父、父、子
- android - “找不到 [com/google/android/gms/internal/zzata] 的通用超类
- java - 我不能打开spring boot web吗?