Веб-просмотр в response-native не отображается с другим тегом jsx, но отображается только один

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'; 

так, как вы имели это приводит к ошибкам, потому что createClass должны быть доступны из реагировать пакет.

url опоры на <WebView /> устарели, так как реагируют на природу 0,20. Я бы рекомендовал обновить реакцию native и вместо этого использовать source.

Наконец, на основе вашего образца кода вы просто хотите отобразить статическую текстовую строку над веб-представлением. Это устраняет необходимость размещения вокруг него <ScrollView />. Этот фрагмент будет отображаться правильно. Для краткости я использовал встроенный стиль для <View />. Обратите внимание, что я сохранил использование опоры url из вашего исходного кода:

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