JavaScript - 添加圖像：反應本機XCode

Question

我想知道如何去插入圖像到這？

我也想知道這是JavaScript實現的CSS還是實現在JavaScript中的CSS？

它是自動生成的陣營本土作爲默認的應用程序啓動器包，我們剛開的基本知識交手...

import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 


class VLDB extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style = {styles.welcome}> 
     VLDB SQL Cheat Sheet! 
     </Text> 
     <Text style={styles.welcome}> 
      Welcome to the SQL Cheat Sheet! 
     </Text> 
     <Text style={styles.instructions}> 
      To get started, edit index.ios.js 
     </Text> 
     <Text style={styles.instructions}> 
      Press Cmd+R to reload,{'\n'} 
      Cmd+D or shake for dev menu 
     </Text> 
     </View> 
    ); 
    } 
} 


const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
}); 


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

乾杯，盧克。

Answer 1

將圖像添加到這一點，首先需要在圖像成分

import React, { 
    AppRegistry, 
    Component, 
    Image, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 

然後添加的圖像爲通過引用本地捆綁圖像或像這樣的遠程圖像中the documentation描述進口。 ..

class VLDB extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Image 
      style={styles.icon} 
      source={require('./myIcon.png')} 
      /> 
     <Image 
      style={styles.logo} 
      source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} 
      /> 
     <Text style = {styles.welcome}> 
     VLDB SQL Cheat Sheet! 
     </Text> 
     <Text style={styles.welcome}> 
      Welcome to the SQL Cheat Sheet! 
     </Text> 
     <Text style={styles.instructions}> 
      To get started, edit index.ios.js 
     </Text> 
     <Text style={styles.instructions}> 
      Press Cmd+R to reload,{'\n'} 
      Cmd+D or shake for dev menu 
     </Text> 
     </View> 
    ); 
    } 
}