javascript - React-Native中的WebView不会与另一个jsx标签一起显示，而是单独显示

Question

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

我无法在此处查看 WebView，但如果我只保留 WebView 标记，它就可以工作。它不能与文本标签一起使用。另外，我确实知道渲染函数应该返回一个标签，并且我将这两个标签包含在 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;

Answer 1

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

React 和 React Native 模块包含不正确。我建议将其更改为:

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

你的方式会导致错误，因为 createClass应该从 react 包访问。

url支撑<WebView />自 React Native 0.20 起已被弃用。我建议升级 React Native 并使用 source改为 Prop 。

最后，根据您的代码示例，您似乎只想在 Web View 上方显示静态文本字符串。这样就无需放置 <ScrollView />周围。此代码片段将使您的 View 正确显示。我在 <View /> 上使用了内联样式为了简洁起见。请注意，我保留了您对 url 的使用来自原始代码示例的 prop:

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