[react-native] 08 Image + TextInput 组件（登录注册铺垫）

Image 组件

作用：加载图片

加载方式：

• 本地路径
• 图片的URL地址
• 图片的Base64字符串

导入 组件

import {Text, View, ScrollView, StyleSheet, Image} from 'react-native'

//image组件
<Image  
    style={[styles.itemImg]}  
    source={require('../image/demo_pic.jpeg')}  
/>

//添加样式
const styles = StyleSheet.create({  
    container:{  
        flex:1,  
        justifyContent:'center',  
        alignItems:'center'  
    },  

    itemImg:{  
        height:200,  
        width:Dimensions.get('window').width,  
        marginVertical:20  
    }  
})

TextInput 组件

导入组件

import {Text, View, ScrollView, StyleSheet, TextInput, Dimensions} from 'react-native'

调用组件

// 调用组件
<View style={[styles.container]}>  
    <TextInput  
    style={[styles.input]}  
    />  
</View>

//添加样式
container:{  
    flex:1,  
    justifyContent:'center',  
    alignItems:'center'  
},  
  
input:{  
    width:Dimensions.get('window').width,  
    margin:10,  
    borderWidth:1,  
    borderColor:'red',  
    paddingHorizontal:5  
}

添加 placeholder 和 按钮

<TextInput  
    style={[styles.input]}  
    placeholder="请输入用户名"  
/>  
  
<View style={[styles.btn]}>  
    <Button title="登录" onPress={this.doLogin}/>  
</View>

添加构造函数 和 doLogin 函数

constructor(){  
    super()  

    this.state = {username:''}  
}  
  
  
doLogin = () => {alert(this.state.username)}

添加 btn 样式

btn:{  
    margin:10,  
    width:Dimensions.get('window').width -20,  
}

效果图如下：

获取用户名

<TextInput  
    style={[styles.input]}  
    placeholder="请输入用户名"  
    value={this.state.username}  
    onChangeText={( val ) => {  
        this.setState({  
        username : val  
    })}}  
/>

获取密码

添加密码进 state

constructor(){  
    super()  

    this.state = {username:'', password:''}  
}

添加一个新的 TextInput 组件

<TextInput  
    style={[styles.input]}  
    placeholder="请输入密码"  
    value={this.state.password}  
    secureTextEntry={true}  
    onChangeText={  
        (val) => {  
            this.setState({ password:val})  
        }  
    }  
/>

不显示输入文本 --->secureTextEntry={true}

效果如图

默认键盘格式

<TextInput  
    style={[styles.input]}  
    placeholder="请输入你的手机号"  
    keyboardType="number-pad"  
/>

这里需要注意keyboardType="number-pad" 的用法

//文本域
<TextInput  
    style={[styles.input]}  
    placeholder="请输入自我介绍（5行）"  
    multiline={true}  
    numberOfLines={5}  
    textAlignVertical="top"
/>

全部代码

import React, {Component} from 'react'  
import {Text, View, ScrollView, StyleSheet, TextInput, Dimensions, Button} from 'react-native'  
  
export default class FlexDirection extends Component{  
  
constructor(){  
super()  
  
this.state = {username:'', password:''}  
}  
  
  
doLogin = () => {alert(this.state.username + ' ' + this.state.password)}  
render(){  
return (  
<View style={[styles.container]}>  
<TextInput  
style={[styles.input]}  
placeholder="请输入用户名"  
value={this.state.username}  
onChangeText={( val ) => {  
this.setState({  
username : val  
})}}  
/>  
  
  
<TextInput  
style={[styles.input]}  
placeholder="请输入密码"  
value={this.state.password}  
secureTextEntry={true}  
onChangeText={  
(val) => {  
this.setState({ password:val})  
}  
}  
/>  
  
  
  
<TextInput  
style={[styles.input]}  
placeholder="请输入你的手机号"  
keyboardType="number-pad"  
/>  
  
  
<TextInput  
style={[styles.input]}  
placeholder="请输入自我介绍（5行）"  
multiline={true}  
numberOfLines={5}  
textAlignVertical="top"  
/>  
  
<View style={[styles.btn]}>  
<Button title="登录" onPress={this.doLogin}/>  
</View>  
  
  
  
</View>  
)  
}  
}  
  
const styles = StyleSheet.create({  
container:{  
flex:1,  
justifyContent:'center',  
alignItems:'center'  
},  
  
input:{  
width:Dimensions.get('window').width -20,  
margin:10,  
borderWidth:1,  
borderColor:'red',  
paddingHorizontal:5  
},  
  
btn:{  
margin:10,  
width:Dimensions.get('window').width -20,  
}  
})