onPress() 触发时 WebView 不出现

Question

下面的代码创建了一张卡片，在这张卡片中我想从卡片中加载 url 并使用 'react-native-webview' 导入使 webview 出现。

import {View, Linking, TouchableNativeFeedback} from 'react-native';
import {Text, Button, Card, Divider} from 'react-native-elements';
import moment from 'moment';
import {WebView} from 'react-native-webview';

export default class DataItem extends React.Component {
  render() {
    const {title, description, publishedAt, source, urlToImage, url} =
      this.props.article;
    const {noteStyle, featuredTitleStyle} = styles;
    const time = moment(publishedAt || moment.now()).fromNow();
    return (
      <TouchableNativeFeedback
        useForeground
        onPress={() => <WebView source={{uri: url}} style={{marginTop: 20}} />}>
        <Card>
          <Text style={{fontWeight: 'bold'}}> {title || 'YEET'} </Text>
          <Divider style={{backgroundColor: '#dfe6e9', margin: 5}} />
          <Card.Image source={{uri: urlToImage}} />
          <Text style={{marginBottom: 10}}>{description || 'Read More..'}</Text>
          <Divider style={{backgroundColor: '#dfe6e9'}} />
          <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
            <Text style={noteStyle}>{source.name.toUpperCase()}</Text>
            <Text style={noteStyle}>{time}</Text>
          </View>
        </Card>
      </TouchableNativeFeedback>
    );
  }
}

Answer 1

我假设您正尝试在卡片按下时显示网络视图。我在您的代码中看到的问题是您正在尝试 return Touchable onPress 上的组件，这不是正确的方法。你必须保持这种状态，就像你按下卡片状态激活并显示 webview 一样。

试试这个

import { View, Linking, TouchableNativeFeedback } from 'react-native';
import { Text, Button, Card, Divider } from 'react-native-elements';
import moment from 'moment';
import { WebView } from 'react-native-webview';

export default class DataItem extends React.Component {

  state = {
    showWebview: false,
  };

  render() {
    const {
      title,
      description,
      publishedAt,
      source,
      urlToImage,
      url,
    } = this.props.article;
    const { noteStyle, featuredTitleStyle } = styles;
    const time = moment(publishedAt || moment.now()).fromNow();
    return (
      <View>
        <TouchableNativeFeedback
          useForeground
          onPress={() => {
            this.setState({ showWebview: true });
          }}
        >
          <Card>
            <Text style={{ fontWeight: 'bold' }}> {title || 'YEET'} </Text>
            <Divider style={{ backgroundColor: '#dfe6e9', margin: 5 }} />
            <Card.Image source={{ uri: urlToImage }} />
            <Text style={{ marginBottom: 10 }}>
              {description || 'Read More..'}
            </Text>
            <Divider style={{ backgroundColor: '#dfe6e9' }} />
            <View
              style={{ flexDirection: 'row', justifyContent: 'space-between' }}
            >
              <Text style={noteStyle}>{source.name.toUpperCase()}</Text>
              <Text style={noteStyle}>{time}</Text>
            </View>
          </Card>
        </TouchableNativeFeedback>
        {this.state.showWebView && ( // it will show webview whew showWebview is  true.
          <WebView source={{ uri: url }} style={{ marginTop: 20 }} />
        )}
      </View>
    );
  }
}

onPress() 触发时 WebView 不出现

WebView does not appear when onPress() triggered

javascript

webview

react-native