प्रतिक्रिया मूल निवासी: वेबव्यू का उपयोग कैसे करें?

Question

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

यहां नमूना: 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>
    );
  }
}

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

react-native

1

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

Answer 1

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

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

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

2

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

Answer 2

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

प्रतिक्रिया मूल निवासी: वेबव्यू का उपयोग कैसे करें?

2 जवाब

संबंधित सवाल

नए सवाल

react-native