React Native 界面入门 for WebStorm

前端之家收集整理的这篇文章主要介绍了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相关文章