ReactNative的基本组件的认识
通过官网的react-native init myProject,并打开Android Studio的手机模拟器进行调试
下面的代码使用了 Text 、Image、View、TextInput和的react-native-modal-dropdown(下拉框)的组件,初步开发了一个登陆界面
1、Image的 source静态资源需要 require的引入,服务器资源的引入uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
2、一行显示设置flexDirection: 'row'
3、android的输入框TextInput的
<TextInput style={{height: 40,width:200,padding: 0}} underlineColorAndroid="transparent" 去掉下边框 keyboardType ='numeric' 调起的是数字键盘 placeholder="请输入手机号" onChangeText={(text) => this.setState({text})} secureTextEntry={true} 像password的输入 />
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View, Image, TextInput } from 'react-native'; import ModalDropdown from 'react-native-modal-dropdown'; const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', }); type Props = {}; export default class App extends Component < Props > { constructor(props) { super(props); this.state = { text: '', value:'', c:'86' } } render() { let pic = { uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; let phone=[86,100,200,300] return( <View style={styles.container}> <Image source={require('./img/img.jpg')} style={{width: 193, height: 110}} /> <Text style={styles.title}> 代理后台 </Text> <View style={{flexDirection: 'row',borderBottomColor:'#dbdbdb',borderBottomWidth:1}}> <Text style={{marginRight:10}}> 国家/地区 </Text> <ModalDropdown options={['中国大陆', '香港','台湾','美国']} dropdownStyle={{height: 300,width:200}} textStyle={{height: 30,width:200,padding:0}} defaultValue='中国大陆' onSelect={(index,value)=>{ this.setState({ c:phone[index] }) }} /> </View> <View style={{flexDirection: 'row',borderBottomColor:'#dbdbdb',borderBottomWidth:1}}> <Text style={{height: 40,marginRight:40,lineHeight:40}}> + {this.state.c} </Text> <TextInput style={{height: 40,width:200,padding: 0}} underlineColorAndroid="transparent" keyboardType ='numeric' placeholder="请输入手机号" onChangeText={(text) => this.setState({text})} secureTextEntry={true} /> </View> <View style={{ borderBottomColor:'#dbdbdb', borderBottomWidth:1 }}> <TextInput style={{height: 40,width:200,padding:0}} keyboardType ='numeric' underlineColorAndroid="transparent" placeholder="请输入验证码" onChangeText={(text) => this.setState({text})} /> </View> <Text style={styles.instructions}> {this.state.text} </Text> <Text style={styles.instructions}> {instructions} </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', paddingTop: 10, alignItems: 'center', backgroundColor: '#fff', }, title: { fontSize: 20, textAlign: 'center', color: '#000', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });
你要觉得这篇文章比较好,记得点推荐!