Question

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

我无法在此处查看WebView，但如果我只保留WebView标记，则可以正常工作。它不与Text标签一起使用。另外，我知道render函数应该返回一个标记，并且我将两个标记包含在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

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

反应和反应原生模块包含不正确。我建议将其更改为：

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

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

url上的<WebView />道具已被弃用，原点为0.20。我建议升级本地反应并改为使用source道具。

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

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

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

1 个答案: