Webview dans reac-native ne s'affiche pas avec un autre tag jsx, mais est affiché seul

Question

J'utilise NavigatorIOS et WebView pour comprendre la navigation.

Je ne suis pas en mesure d'afficher le WebView ici, mais si je garde juste la balise WebView, cela fonctionne. Cela ne fonctionne pas avec la balise Text. En outre, je comprends que la fonction de rendu doit retourner une balise et je joins les deux balises dans la balise 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

Le code que vous avez publié comporte quelques problèmes supplémentaires.

Les modules natifs de réaction et de réaction sont inclus de manière incorrecte. Je vous recommande de le changer pour:

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

La façon dont vous l'aviez fait des erreurs car createClass est accessible à partir du package réagir.

Le prop url sur le <WebView /> a été déprécié en tant que réactif natif 0,20. Je recommande la mise à niveau de réagir natif et en utilisant le prop source à la place. Enfin, en fonction de votre exemple de code, il semble que vous souhaitiez simplement afficher une chaîne de texte statique au-dessus de votre vue Web. Cela supprime le besoin de placer un <ScrollView /> autour d'elle. Cet extrait affichera votre vue correctement. J'ai utilisé un style en ligne sur le <View /> pour des raisons de concision. Notez que j'ai conservé votre utilisation du prop url de votre échantillon de code original:

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