react-native 中的 Webview 不会与另一个 jsx 标签一起显示，而是单独显示答案

【问题标题】：Webview in react-native doesn't get displayed with another jsx tag, but gets displayed alonereact-native 中的 Webview 不会与另一个 jsx 标签一起显示，而是单独显示
【发布时间】：2016-06-23 21:20:03
【问题描述】：

我正在使用 NavigatorIOS 和 WebView 来理解导航。

我无法在此处查看 WebView，但如果我只保留 WebView 标签，它就可以工作。它不适用于 Text 标签。另外，我知道渲染函数应该返回一个标签，并且我将这两个标签包含在 View 标签中。

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NavigatorIOS,
  WebView,
  TouchableWithoutFeedback,
  ScrollView
} = React;

var FirstPage = React.createClass({
  _handleChangePage() {
    this.props.toggleNavBar();
    this.props.navigator.push({
      title: "Second Page",
      component: SecondPage,
      passProps: {
        toggleNavBar: this.props.toggleNavBar,
      }
    });

  },

  render() {
    return (
      <View>
        <Text>FirstPage</Text>

        <TouchableWithoutFeedback onPress={this._handleChangePage}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>Go to SecondPage</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
});

var SecondPage = React.createClass({
  _handleChangePage() {
    this.props.toggleNavBar();
    this.props.navigator.push({
      title: "First Page",
      component: FirstPage,
      passProps: {
        toggleNavBar: this.props.toggleNavBar,
      }
    });

  },

  render() {
    return (
        <View>
            <ScrollView>
            <Text> Some Text </Text> 
            <WebView 
              url={'https:www.google.com'}
              scalesPageToFit={true}
            />
            </ScrollView>
            </View>
    );
  }
});

var SampleApp = React.createClass({
  getInitialState() {
    return {
      navigationBarHidden: false
    };
  },

  toggleNavBar() {
    this.setState({
      navigationBarHidden: !this.state.navigationBarHidden
    });
  },

  render() {
    return (
      <NavigatorIOS ref="nav"
                    itemWrapperStyle={styles.navWrap}
                    style={styles.nav}
                    initialRoute={{
                      title: "First Page",
                      component: FirstPage,
                      passProps: {
                        toggleNavBar: this.toggleNavBar,
                      }
                    }} />
    );
  }
});

var styles = StyleSheet.create({
  navWrap: {
    flex: 1,
    marginTop: 70
  },
  nav: {
    flex: 1,
  },
  button: {
    backgroundColor: "#009DDD",
    padding: 10,
    margin: 10,
  },
  buttonText: {
    color: "#fff"
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

module.exports = SampleApp;

【问题讨论】：

标签： javascript webview react-native navigator

【解决方案1】：

您发布的代码还有一些其他问题。

react 和 react 本机模块包含不正确。我建议将其更改为：

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NavigatorIOS,
  WebView,
  TouchableWithoutFeedback,
  ScrollView
} from 'react-native';

您使用它的方式会导致错误，因为应该从 react 包中访问 createClass。

<WebView /> 上的 url 属性自 react native 0.20 起已被弃用。我建议升级 react native 并改用 source 属性。

最后，根据您的代码示例，您似乎只想在 Web 视图上方显示一个静态文本字符串。这消除了在其周围放置<ScrollView /> 的需要。这个 sn-p 将使您的视图正确显示。为简洁起见，我在 <View /> 上使用了内联样式。请注意，我保留了您对原始代码示例中 url 道具的使用：

<View style={{flex:1}}>
  <Text> Team WalmartLabs </Text> 
  <WebView 
    url={'https://www.google.com'}
    scalesPageToFit={true}
  />
</View>

【讨论】：