Question

react native怎么导入webstorm

Answer 1

本着什么都要搀和的原则，一起来看看React Native是如何开发iOS APP。 围观本文需自备Mac OSX ， XCode ， node 以及 npm 。 做好准备之后，打开你的终端（或其他命令行利器），键入下面命令： npm install -g react-native-cli 和 react-native init AwesomeProject 此时，我们会看到一个名为AwesomeProject的文件夹，这就是工程文件的位置。使用XCode打开AwesomeProject/UePbdph.jpg'}}, ]; 二、渲染 我们需要展示电影的标题、年份以及缩略图，因此我们需要下面这些东西（看起来也不难理解）： var { AppRegistry, Image, StyleSheet, Text, View, } = React; 下面，为了展示我们需要的内容，我们来修改一下render部分的内容。 render: function() { var movie = MOCKED_MOVIES_DATA[0]; return ( <View style={styles.container}> <Text>{movie.title}</Text> <Text>{movie.year}</Text> <Image source={{uri: movie.posters.thumbnail}} /> </View> ) } 最直观的感受，就像是我们在Javascript代码中写了HTML代码，<View>看起来类似于<div>。（此时在iOS模拟器中cmd+R可以看到不带样式的效果） 接下来，我们为渲染出来的数据添加样式： var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, thumbnail: { width: 53, height: 81, }, }); 我们可以使用flex来进行布局，看起来是个好消息。 在这时候，教程说，海报图片（<Image>）还没有添加样式，我们找到<Image source={{uri: movie.posters.thumbnail}} />，添加上style={styles.thumbnail}也就是变成下面的样子： <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> 此时在模拟器中cmd+R，可以看到效果如下：