hcmobile-sdk/components/keyboardScrollView/KeyBoardScrollViewDemo.js

mobile-sdk

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import KeyboardAwareScrollView from './KeyboardAwareScrollView';
import TextInput from '../textInput/index';

// create a component
class KeyBoardScrollViewDemo extends Component {
    render() {
        return (
            <KeyboardAwareScrollView 
                style={styles.container}
                enableOnAndroid = {false}
                extraHeight = {80}
                enableAutomaticScroll = {true}
                extraScrollHeight = {60}
                innerRef={ref => {this.scroll = ref;}}
            >
                <View style = {{width:'100%',height:68,padding:10,marginTop:60,}}>
                    <Text>用户名</Text>
                    <TextInput 
                        style = {{width:'100%',margin:10}}/>
                </View>
                <View style = {{width:'100%',height:68,padding:10,marginTop:60,}}>
                    <Text>密码</Text>
                    <TextInput 
                        style = {{width:'100%',margin:10}}/>
                </View>
                <View style = {{width:'100%',height:68,padding:10,marginTop:60,}}>
                    <Text>确认密码</Text>
                    <TextInput 
                        style = {{width:'100%',margin:10}}/>
                </View>
                <View style = {{width:'100%',height:68,padding:10,marginTop:60,}}>
                    <Text>昵称</Text>
                    <TextInput 
                        style = {{width:'100%',margin:10}}/>
                </View>
                <View style = {{width:'100%',height:68,padding:10,marginTop:60,}}>
                    <Text>邮箱</Text>
                    <TextInput 
                        style = {{width:'100%',margin:10}}/>
                </View>
                <View style = {{width:'100%',height:68,padding:10,marginTop:60,}}>
                    <Text>手机号</Text>
                    <TextInput 
                        style = {{width:'100%',margin:10}}/>
                </View>
            </KeyboardAwareScrollView>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
});

//make this component available to the app
export default KeyBoardScrollViewDemo;