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','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 ]) };
    }

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

运行看效果：

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

React Native 界面入门 for WebStorm

相关文章