JavaScript - 添加图像：React Native XCode答案

【问题标题】：JavaScript - Adding an Image : React Native XCodeJavaScript - 添加图像：React Native XCode
【发布时间】：2016-04-04 14:48:46
【问题描述】：

我想知道如何在其中插入图像？？

我也想知道这是用css实现的javascript还是用javascript实现的css？

它是由 React Native 自动生成的，作为默认应用启动包，我们刚刚开始掌握基础知识...

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);

干杯，卢克。

【问题讨论】：

标签： javascript css xcode react-native

【解决方案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>
    );
  }
}

【讨论】：

我怎么把代码发回给你，我用的是第一种方法，require('./button.png')}
这是错误：我收到：无法从 /Users/lcharlton/VLDB/index.ios.js 解析模块 .button.png：无法在其模块映射或任何模块映射中找到此模块/Users/lcharlton/VLDB/button.png 下的 node_modules 目录及其父目录
所以“./button.png”路径意味着 button.png 文件与调用它的文件存在于同一目录中（在您的情况下为 index.ios.js）。是那里吗？
是的，button.png 不在我的桌面上，而 index.ios.js 在我的用户文档中的另一个目录中。