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@H_403_28@ React,{ Component } from 'react'@H_403_28@;
import@H_403_28@ { AppRegistry,ListView,Text,View } from 'react-native'@H_403_28@;

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

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

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

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

然后效果图：

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

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

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

2.把TextView换成Image

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

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

运行看效果：

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

React Native 界面入门 for WebStorm

猜你在找的React相关文章