मैं वेबव्यू घटक का परीक्षण कर रहा हूं, लेकिन मुझे इसे चीजों को प्रस्तुत करने के लिए प्रतीत नहीं होता है।

यहां नमूना: https://snack.expo.io/r1oje4C3-

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url. You get a new url each time you save.
        </Text>
        <WebView source={{html: '<p>Here I am</p>'}} />        
        <WebView source={{ uri: 'http://www.google.com'}} />
      </View>
    );
  }
}

एक्सपो में उपरोक्त उदाहरण चलाते समय, दो वेबव्यू घटकों में से कोई भी प्रस्तुत नहीं होता है। मैं क्या गलत कर रहा हूं?

1
Roy Tang 13 अक्टूबर 2017, 15:26

2 जवाब

सबसे बढ़िया उत्तर

ऐसा लगता है कि आपको चौड़ाई शैली पैरामीटर प्रदान करने की आवश्यकता है, जैसे:

<WebView
    source={{uri: 'https://github.com/facebook/react-native'}}
    style={{width: 300}}
/>

ध्यान दें कि आपको ऊंचाई शैली पैरामीटर भी प्रदान करना पड़ सकता है। आप शैली में flex: 1 भी जोड़ सकते हैं।

2
Nepho 13 अक्टूबर 2017, 17:13

style प्रोप को flex: 1 के साथ WebView पर जोड़ें

export default class App extends Component {
  render() {
   return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone!
        Save to get a shareable url. You get a new url each time you save.
      </Text>
      <WebView style={{flex: 1}} source={{html: '<p>Here I am</p>'}} />        
      <WebView style={{flex: 1}} source={{ uri: 'http://www.google.com'}} />
    </View>
  );
 }
}
1
Mohamed Khalil 13 अक्टूबर 2017, 15:47