ReactNative项目实战02(实现项目的第一个界面).md

引言:大部分项目第一次进入都是登陆界面:现在我们就来实现一个登陆功能的界面

最终实现效果

功能实现

使用WebStrom打开RN项目,打开App.js文件
1. 由于我们需要使用到图片展示,输入框和按钮,所以需要先引入这些控件

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  Button
} from 'react-native';

1. 布局:在render()方法中实现我们想要的布局
   
   • 先处理图片:图片资源从本地获取,如果不处理的话,我们看到的是一个正方形的图片.

export default class App extends Component<Props> {
    render() {
        return (
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Image style={{width:100,height:100}} source={require('./img/ic_rn.jpg')}/>
            </View>
        );
    }
}

//要实现圆形图片,可进行设置图片的圆角为正方形图片宽度一半即可
export default class App extends Component<Props> {
    render() {
        return (
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Image style={{width:100,height:100,borderRadius:50,borderWidth:3,borderColor:'#fff'}}
                       source={require('./img/ic_rn.jpg')}
                />
            </View>
        );
    }
}

效果图为:

* 添加输入框

              <TextInput
                    style={{width:'90%',height: 40, borderColor: '#ffa800', borderWidth: 1,marginTop:20,borderRadius:3,paddingLeft:10,color:"#2d2d2d"}}
                    maxLength={11}
                    placeholder='请输入用户名'
                    placeholderTextColor='#999'
                    clearButtonMode='always'
                    onChangeText={(text)=>
                                this.setState({
                                   username :text
                                })
                           }
                    selectionColor="#00f"
                    underlineColorAndroid='transparent'/>
                <TextInput
                    style={{width:'90%',height: 40, borderColor: '#ffa800',marginTop:10, borderWidth: 1,borderRadius:3,paddingLeft:10,color:"#2d2d2d"}}
                    keyboardType='numeric'
                    maxLength={6}
                    placeholder='请输入密码'
                    placeholderTextColor='#999'
                    clearButtonMode='always'
                    onChangeText={(text)=>
                                this.setState({
                                   password :text
                                })
                           }
                    selectionColor="#00f"
                    underlineColorAndroid='transparent'/>

输入框主要处理了,边框,和提示文本,和监听文本输入,最要的效果为:

* 最后是添加按钮
1. rn有自己的按钮Button控件,但是其样式是固定的,不太适合实际项目开发,我们一半多采用TouchableOpacity加Text实现
2. 在TouchableOpacity的onPress方法中设置点击事件处理

        <TouchableOpacity
                    style={{width:'90%',backgroundColor:'#ffa800',padding:8,marginTop:10,justifyContent:'center',alignItems:'center',borderRadius:20}}
                    activeOpacity={0.5}
                    onPress={()=>
                    this._onPressLogin()
                }>
                    <Text style={{color:'white',fontSize:16,fontWeight:'bold'}}>Login</Text>
        </TouchableOpacity>

• 最终效果为:
  
  
  • 全部代码

import React, {Component} from 'react';
import {
    Text,
    View,
    TextInput,
    Image,
    Button,
    TouchableOpacity,
    Dimensions
} from 'react-native';
const {ScreenWidth, ScreenHeight} = Dimensions.get('window');

// type Props = {};
export default class App extends Component<Props> {

    constructor(props) {
        super(props);
        console.log("constructor");
        this.state = {
            username: '',
            password: '',
        }
    }

    _onPressLogin = ()=> {
        if (this.state.username === 'timmy' && this.state.password === '123') {
            console.log("恭喜登陆成功")
        }
    };

    render() {
        return (
            <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                <Image style={{width:80,height:80,borderRadius:40,borderWidth:3,borderColor:'#fff'}}
                       source={require('./img/ic_rn.jpg')}/>

                <TextInput
                    style={{width:'90%',height: 40, borderColor: '#ffa800', borderWidth: 1,marginTop:10,borderRadius:3,paddingLeft:10,color:"#2d2d2d"}}
                    maxLength={11}
                    placeholder='请输入用户名'
                    placeholderTextColor='#999'
                    clearButtonMode='always'
                    onChangeText={(text)=>
                                this.setState({
                                   username :text
                                })
                           }
                    selectionColor="#00f"
                    underlineColorAndroid='transparent'/>
                <TextInput
                    style={{width:'90%',height: 40, borderColor: '#ffa800',marginTop:10, borderWidth: 1,borderRadius:3,paddingLeft:10,color:"#2d2d2d"}}
                    keyboardType='numeric'
                    maxLength={6}
                    placeholder='请输入密码'
                    placeholderTextColor='#999'
                    clearButtonMode='always'
                    onChangeText={(text)=>
                                this.setState({
                                   password :text
                                })
                           }
                    selectionColor="#00f"
                    underlineColorAndroid='transparent'/>
                <TouchableOpacity
                    style={{width:'90%',backgroundColor:'#ffa800',padding:8,marginTop:10,justifyContent:'center',alignItems:'center',borderRadius:20}}
                    activeOpacity={0.5}
                    onPress={()=>
                    this._onPressLogin()
                }>
                    <Text style={{color:'white',fontSize:16,fontWeight:'bold'}}>Login</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

• 总结:
  
  1. 通过给Image设置圆角半径,实现圆形图片
  2. 输入框TextInput的样式处理和监听输入文本内容
  3. 按钮实现,并实现点击事件