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 unmounting
push(route) - Navigate forward to a new scene, squashing any scenes that you could jumpForward to
pop() - Transition back and unmount the current scene
replace(route) - Replace the current scene with a new route
replaceAtIndex(route, index) - Replace a scene as specified by an index
replacePrevious(route) - Replace the previous scene
immediatelyResetRouteStack(routeStack) - Reset every scene with an array of routes
popToRoute(route) - Pop to a particular scene, as specified by its route. All scenes after it will be unmounted
popToTop() - Pop to the first scene in the stack, unmounting every other scene