React native Webview&;redabilitywebview在android中运行良好,而不是在ios中
我使用的是使用webview和readbilitywebview的inapp浏览器。它在android中工作正常,但在ios中,webview不显示除新闻标题以外的任何内容,在readbilitywebview中出现错误“在ui管理器中找不到固定冲突要求本机组件rncwkwebview管理器” 使用expo cli进行开发 //网络视图React native Webview&;redabilitywebview在android中运行良好,而不是在ios中,react-native,webview,React Native,Webview,我使用的是使用webview和readbilitywebview的inapp浏览器。它在android中工作正常,但在ios中,webview不显示除新闻标题以外的任何内容,在readbilitywebview中出现错误“在ui管理器中找不到固定冲突要求本机组件rncwkwebview管理器” 使用expo cli进行开发 //网络视图 import { WebView,StyleSheet,View } from 'react-native'; import { Container, Text
import { WebView,StyleSheet,View } from 'react-native';
import { Container, Text } from 'native-base';
import { Ionicons } from '@expo/vector-icons';
import { Header } from 'react-native-elements';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { NavigationActions, StackActions } from 'react-navigation';
import SimpleWebView from './webModal';
class MyWeb extends Component {
render() {
const { navigation } = this.props;
const title = JSON.stringify(navigation.getParam('title'))
const url = (navigation.getParam('url'))
return (
<View style={styles.container}>
<Header
backgroundColor="white"
/*leftComponent={<Ionicons name="md-arrow-round-back"
size={25}
onPress={() => {
alert('You tapped the button!');
}}/>}*/
centerComponent={
<Text
numberOfLines={1}
style={{
fontSize: 14,
fontWeight: 'bold'
}}>
{title}
</Text>}
rightComponent={
<Ionicons name="ios-book"
size={25}
onPress={() => {
this.props.navigation.navigate('Webview', {
url: (url),
title: (title)
});
}} />
}
/>
<WebView
source={{
uri: (navigation.getParam('url'))
}}
style={{ marginTop: 20 }}
/>
</View>
);
}
}
const MainNavigator = createStackNavigator({
Home: {
screen: MyWeb,
navigationOptions: {
header: null,
},
},
Webview: {
screen: SimpleWebView,
navigationOptions: {
header: null,
},
},
},
{
initialRouteName: 'Home',
}
);
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
const Webpage = createAppContainer(MainNavigator);
export default Webpage;
从'react native'导入{WebView,样式表,View};
从“本机基”导入{Container,Text};
从“@expo/vector icons”导入{Ionicons};
从“react native elements”导入{Header};
从“react navigation”导入{createAppContainer};
从“反应导航堆栈”导入{createStackNavigator};
从“react navigation”导入{NavigationActions,StackActions};
从“/webModal”导入SimpleWebView;
类MyWeb扩展组件{
render(){
const{navigation}=this.props;
const title=JSON.stringify(navigation.getParam('title'))
常量url=(navigation.getParam('url'))
返回(
}*/
中心组件={
{title}
}
右分量={
{
this.props.navigation.navigate('Webview'{
url:(url),
标题:(标题)
});
}} />
}
/>
);
}
}
const MainNavigator=createStackNavigator({
主页:{
屏幕:MyWeb,
导航选项:{
标题:null,
},
},
网络视图:{
屏幕:SimpleWebView,
导航选项:{
标题:null,
},
},
},
{
initialRouteName:“主页”,
}
);
const styles=StyleSheet.create({
容器:{
弹性:1,
}
});
const Webpage=createAppContainer(MainNavigator);
导出默认网页;
//可编辑性Web视图
import { Text, View, StyleSheet } from 'react-native';
import ReadabilityWebView from "react-native-webview-readability";
import Constants from 'expo-constants';
const css =
`body {
color: #2a2a2a;
}
img, figure {
display: none;
}
h1 {
border-bottom-width: 1px;
border-color: #ccc;
padding-bottom: 3px;
border-bottom-style:solid;
font-size: 1.6em;
font-weight: bold;
letter-spacing: .05em;
}
p {
letter-spacing: .03em;
}`;
export default class SimpleWebView extends React.Component {
render() {
const { navigation } = this.props;
return (
<View style={styles.continer}>
<ReadabilityWebView
automaticallyAdjustContentInsets={true}
htmlCss={css}
url={(navigation.getParam('url'))}
title=
{navigation.getParam('title')}
/>
</View>
);
}
}
const styles = StyleSheet.create({
continer: {
flex: 1,
paddingTop: Constants.statusBarHeight
}
});```
workes in android but not in ios. Iam using expo cli.
[![this is what shows when ReadabilityWebView is opend:][1]][1]
[1]: https://i.stack.imgur.com/wblI0.jpg
从'react native'导入{Text,View,StyleSheet};
从“react native webview readability”导入ReadabilityWebView;
从“expo常量”导入常量;
常量css=
`身体{
颜色:#2a2a2a;
}
图{
显示:无;
}
h1{
边框底宽:1px;
边框颜色:#ccc;
垫底:3件;
边框底部样式:实心;
字号:1.6em;
字体大小:粗体;
字母间距:.05em;
}
p{
字母间距:.03em;
}`;
导出默认类SimpleWebView扩展React.Component{
render(){
const{navigation}=this.props;
返回(
);
}
}
const styles=StyleSheet.create({
continer:{
弹性:1,
paddingTop:Constants.statusBarHeight
}
});```
可以在安卓系统中工作,但不能在ios中工作。Iam正在使用expo cli。
[![这是打开ReadabilityWebView时显示的内容:[1]][1]
[1]: https://i.stack.imgur.com/wblI0.jpg
我不知道容器组件是如何工作的,但您应该将您的webview包装在一个视图中,并以flex 1的形式提供样式。替换为视图仍然有效。您能显示您的新代码吗?确定代码已编辑。