javascript - प्रतिक्रिया मूल में छवि मॉड्यूल की आवश्यकता परेशानी




ios xcode (5)

बस React-Native साथ शुरू करना और मुझे एक स्थिर छवि की आवश्यकता होने में कुछ परेशानी हो रही है।

यहां तक ​​कि मेरे पास अभी तक का मूलभूत कोड है:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View,
} = React;

var buzz = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Image source={require('image!bg')}  style={styles.bg}>
          <Text style={styles.welcome}>
            Welcome to Buzz! iOS interface to
          </Text>
          <Text style={styles.welcomeHeader}>Charityware</Text>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  welcomeHeader: {
    fontWeight: '600',
    fontFamily: 'Helvetica',
    color: '#fff',
    fontSize: 50,
    alignSelf: 'center'
  },
  bg: {
    width: 400,
    height: 300,
    alignSelf: 'auto',

  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
  },
});

AppRegistry.registerComponent('buzz', () => buzz);

मुख्य परेशानी क्षेत्र है:

    <Image source={require('image!bg')}  style={styles.bg}>
      <Text style={styles.welcome}>
        Welcome to Buzz! iOS interface to
      </Text>
      <Text style={styles.welcomeHeader}>Charityware</Text>
    </Image>

मेरे ऐप को पैकेज करने और इसे चलाने पर, मुझे एक रेंडर त्रुटि मिलती है:

मैं समझता हूं कि छवि को ढूंढने के लिए require कॉल के लिए आपको छवि सेट के रूप में xcode में छवियों को जोड़ने की require और उस अंत में एक छवि सेट जोड़ा है:

...लेकिन कोई फायदा नहीं हुआ। किसी के पास कोई विचार है? मैंने दस्तावेज़ पढ़ लिए हैं और ऐसा निर्धारित तरीके से कर रहे हैं। धन्यवाद!


नोट: नए संसाधनों के लिए ऐप बिल्ड आवश्यक है जब भी आप images.xcassets पर कोई नया संसाधन जोड़ते हैं, तो आपको इसका उपयोग करने से पहले XCode के माध्यम से अपने ऐप को फिर से बनाना होगा - सिम्युलेटर के भीतर से एक पुनः लोड पर्याप्त नहीं है। (प्रतिक्रिया मूल दस्तावेज़ों से https://facebook.github.io/react-native/docs/image.html#content )

पैकेजर को पुनरारंभ करना भी सुनिश्चित करें। इसने मेरे लिए मुद्दा हल किया।


आप अपने संपत्ति फ़ोल्डर में package.json फ़ाइल बनाकर छवियों को संदर्भित करना आसान कर सकते हैं।

परियोजना फ़ोल्डर संरचना

package.json

और आप इसे इस कोड से कॉल कर सकते हैं।

<Image 
   source={require('assets/img/avatar.png')} 
   style={styles.itemAvatar}
   resizeMode={'cover'}
/>

इस प्रश्न का उत्तर पहले ही दिया जा चुका है, लेकिन यदि आप एंड्रॉइड पर रिएक्ट नेटिव का उपयोग करते हैं, तो आपको वही समस्या हो सकती है। मेरे लिए, source={required('./bg.png')} बजाय समाधान source={{ uri: "google", isStatic: true }} उपयोग कर रहा था।

बस अपनी छवियों को src/main/res/drawable फ़ोल्डर में जोड़ना न भूलें।


चूंकि प्रतिक्रिया मूल रिलीज 0.14 आईओएस और एंड्रॉइड के लिए छवियों का संचालन सामान्यीकृत किया गया है और अब अलग है। मुझे गितूब पर इस बहुत ही स्पष्ट प्रतिबद्ध नोट को छोड़कर कोई दस्तावेज नहीं मिला: दस्तावेज़ नई संपत्ति प्रणाली

प्रस्तावित दस्तावेज का केवल एक स्क्रीनशॉट है:

अद्यतन: वास्तविक दस्तावेज के लिए अब एक लिंक है: https://facebook.github.io/react-native/docs/images.html


स्थिर छवियों के लिए, आपको पथ प्रदान करने की आवश्यकता है:

<Image source={require('./images/back.png')}  
style= {{width:25, height:25, marginLeft:12, padding:12}}/>

प्रोजेक्ट निर्देशिका के चित्र फ़ोल्डर में संग्रहीत छवि के लिए यह मेरे लिए काम करता है:





react-native