通過官網的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的

<TextInputstyle={{height: 40,width:200,padding: 0}}underlineColorAndroid="transparent" 去掉下邊框keyboardType ='numeric' 調起的是數字鍵盤placeholder="請輸入手機號"onChangeText={(text) => this.setState({text})}secureTextEntry={true} 像password的輸入/>

　　

?

?

/*** 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><TextInputstyle={{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}}><TextInputstyle={{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,}, }); View Code

?

轉載于:https://www.cnblogs.com/yiyi17/p/8624191.html

總結

以上是生活随笔為你收集整理的ReactNative的基本组件的认识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。