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设置了宽度是屏幕的宽度

运行看效果：

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