React Native組件

1.<TextInput />

            autoCapitalize="none"  //自動記錄歷史輸入值

            autoCorrect={true} //自動糾正

            placeholder="search for a project"  //提示文字

            editable = {true}  //是否可編輯

            maxLength = {10}  //最多多少個字

            multiline = {true}  //是否支持多行

            numberOfline = {2}  //最多兩行，超過兩行則往上推

            onEndEditing = {this.onSearchChange}  //搜索中止則調用該方法

      　　keyboardType = "default"  //彈出鍵盤類型

　　　　//TextInput失去焦點時，鍵盤不消失，解決方法：給當前的TextInput設置一個ref屬性，以及onFocus方法來實現。

　　　 　 ref = "textInput"
            onFocus = {() => {this.refs.textInput.focus()}}

 

2.<ListView />

 ScrollView適合用來顯示數量很少的滾動元素。放置在ScollView中的全部組件都會被渲染，哪怕有些組件由於內容太長被擠出了屏幕外。若是你須要顯示較長的滾動列表，那麼應該使用功能差很少但性能更好的ListView組件。

ListView更適於長列表數據，且元素個數能夠增刪。和ScrollView不一樣的是，ListView並不當即渲染全部元素，而是優先渲染屏幕上可見的元素。

ListView組件必須的兩個屬性是dataSource和renderRow。dataSource是列表的數據源，而renderRow則逐個解析數據源中的數據，而後返回一個設定好格式的組件來渲染。

constructor(props) { super(props); var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(['row 1', 'row 2']), }; } render() { return ( <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} /> ); } 

3.NavigatorIOS

 

4.<Image>

 let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };

 <Image source={pic} style={{width: 193, height: 110,marginTop:150}}/>

 

5.WebView

  <WebView source={{uri: 'https://github.com/facebook/react-native'}} style={{marginTop: 20}} />

 

6.<View></View>

View 經常使用做其餘組件的容器，來幫助控制佈局和樣式。

 

7.Navigator

相關屬性：renderScene方法，導航欄能夠根據指定的路由來渲染場景。

configureScene屬性獲取指定路由對象的配置信息，從而改變場景的動畫或者手勢。（具體有哪些動畫可參考：node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js）

initialRoute：配置第一個頁面，參數可自定義

 

 「。。。」這個語法是把 routes.params 裏的每一個key 做爲props的一個屬性:

 

子頁返回的方法：

getCurrentRoutes() - 獲取當前棧裏的路由，也就是push進來，沒有pop掉的那些jumpBack() - 跳回以前的路由，固然前提是保留如今的，還能夠再跳回來，會給你保留原樣。jumpForward() - 上一個方法不是調到以前的路由了麼，用這個跳回來就行了jumpTo(route) - Transition to an existing scene without unmountingpush(route) - Navigate forward to a new scene, squashing any scenes that you could jumpForward topop() - Transition back and unmount the current scenereplace(route) - Replace the current scene with a new routereplaceAtIndex(route, index) - Replace a scene as specified by an indexreplacePrevious(route) - Replace the previous sceneimmediatelyResetRouteStack(routeStack) - Reset every scene with an array of routespopToRoute(route) - Pop to a particular scene, as specified by its route. All scenes after it will be unmountedpopToTop() - Pop to the first scene in the stack, unmounting every other scene