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