React Native 界面入门 for WebStorm

上一篇学习了怎么在Windows下搭建react native，今天来看一下怎么在WebStorm写界面。

首先，先说一下怎么配置WebStorm（下载），如果你平时熟悉Android Studio,那这个你应该也不陌生，因为他们是同一家公司的出品，下载之后安装，自己去搜一下怎么去注册。

好，现在说配置，打开我们生成的React Native项目，然后file–setting

选择React JSX

下载react和react native

然后点击OK 完成

接着配置npm

是不是和Android Studio很像，看图

好了，基本上完成了配置
我们启动看看

---

正式开始写ui

看一个有代表性的ListView，官网文档

import React, { Component } from 'react';import { AppRegistry, ListView, Text, View } from 'react-native';class ListViewBasics extends Component {  // Initialize the hardcoded data  constructor(props) {    super(props);    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});    this.state = {      dataSource: ds.cloneWithRows([        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin',, 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'      ])    };  }  render() {    return (      <View style={{flex: 1, paddingTop: 22}}>        <ListView          dataSource={this.state.dataSource}          renderRow={(rowData) => <Text>{rowData}</Text>}        />      </View>    );  }}

多放了几组数据，看ListView的效果
简单说下代码，首先import 我们需要的库和控件，这一点和Android道理一样，定义数据，然后ListView展示，然后启动app摇一摇 reload看下效果：

太靠边了，我们调一下，让TextView居中,在TextView的style里加textAlign:'center'

render() {   return (    <View style={{flex: 1, paddingTop: 22}}>     <ListView       dataSource={this.state.dataSource}       renderRow={(rowData) =>        <Text style={{textAlign: 'center'}}>{rowData</Text>}/>     </View>        );    }

然后效果图：

如果我们想把TextView换成图片呢？怎么办？
再去看下官网https://facebook.github.io/react-native/docs/props.html#content
然后我们把上面的TextView换成Image（是的，不是ImageView）

一共分为两步：
1.替换数据，直接看代码（强迫症，为甚么代码贴过来就乱了）

 constructor(props) {        super(props);        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});        let pic = {            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'        };        this.state = {            dataSource: ds.cloneWithRows([                pic, pic, pic, pic, pic, pic, pic, pic            ])        };    }

2.把TextView换成Image

render() {        var Dimensions = require('Dimensions');        var { width, height } = Dimensions.get('window');        return (            <View style={{flex: 1, paddingTop: 5}}>                <ListView                    dataSource={this.state.dataSource}                    renderRow={(rowData) =>                        <Image source={rowData} style={{marginTop:5,width: width, height: 110}}/>}                />            </View>        );    }

这里给Image设置了宽度是屏幕的宽度

运行看效果：

这里是源码地址， 欢迎交流学习~