ReactNative

ReactNative之基本组件

2017-12-18  本文已影响376人  TitanCoder

ReactNative之基本组件

ReactNaive相关文章

1. React Native 中文网

2. GitHub相关代码地址

3. ReactNaive之CSS和Flex布局

4. ReactNative之基本组件

5. React Naive之ScrollView和ListView

6. React Native之导航组件NavigatorIOS和Navigator

7. ReactNative之TabBariOS和TabNavigator

注: 本文主要总结的是ReactNative的一些简单语法, 大部分内容总结自袁大神的文章

这里主要简单介绍以下几个控件:

一. View

二. TouchableOpacity

1. activeOpacity属性

<TouchableOpacity activeOpacity={0.7}>
    <View style={styles.junViewStyle}>
    </View>
</TouchableOpacity>

2. disabled属性

3. 监听的几种手势

onLongPress function ：长按的时候调用

onPress function ：点击的时候调用

onPressIn function ：手指按下的时候调用

onPressOut function ：手指抬起的时候调用

需要注意的是: onPress与onPressIn，onPressOut，有冲突，不要同时实现

           <TouchableOpacity activeOpacity={0.7}
                              onPress={()=>{
                                  alert('点击')
                              }}
                              onLongPress={()=>{
                                  alert('长按')
                              }}
            >
                <View style={styles.junViewStyle}>
                </View>

            </TouchableOpacity>

三. Text

Text: 用于展示一段文字

1. 属性介绍

2. 常用样式属性

color: 'yellow' //字体颜色
fontSize: 20,  //字体大小
fontStyle: 'italic' //字体样式('normal': 正常字体, 'italic': 斜体)

fontWeight:'bold', //指定字体的粗细
//大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值
//enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')

lineHeight:50, //字体的高度(如字体需要垂直居中, 可设置与控件的高度相同即可)
textAlign:'center' //文字排列方式('auto', 'left', 'right', 'center', 'justify'(iOS支持))

        <View style={styles.mainStyle}>
            <Text style={styles.textStyle}
                  numberOfLines={1}
                  selectable={true}
                  adjustsFontSizeToFit={true}
                  minimumFontScale={0.5}
            >
                我是iOS开发工程师
            </Text>
        </View>

四. Button

title='Button' //按钮文字
color="green"  //按钮文字颜色
onPress={()=>{ //点击事件
    alert('点击了Button')
}}
disabled={true} //是否允许点击, 为true时不可点击

        <View style={styles.mainStyle}>
            
            <Button
                title='Button'
                color="green"
                onPress={()=>{
                    alert('点击了Button')
                }}
                disabled={true}
            />
        </View>

五. TextInput

1. 常用属性介绍

placeholder='请输入账号' //占位文字
placeholderTextColor='#e1e1e1' //占位字符串显示的文字颜色

selectionColor='green' //设置光标颜色
caretHidden={true}  //如果为true，则隐藏光标。默认值为false

autoFocus={true}  //自动获取焦点,如果为true，在componentDidMount后会获得焦点。默认值为false

blurOnSubmit={true}  //点击键盘，右下角return,或者按回车的时候，是否自动退出键盘，true:是。注意：键盘必须是英文输入键盘，数字键盘无效.

editable={false}  //文本框是否可以编辑，默认值为true，如果为false，文本框是不可编辑的
secureTextEntry={true}  //是否是密文效果,注意：多行无效果

secureTextEntry={false}  //是否是多行输入框，默认文本输入框只能一行，true,就能多行输入
maxLength={15}  //最大字符数，显示输入文本长度

clearTextOnFocus={true}  //每次重新输入文本框，是否清空之前的文本
enablesReturnKeyAutomatically={true}  //如果为true，键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false

autoCorrect={true}  //如果为false，会关闭拼写自动修正。默认值是true。

enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')

2. 常用的监听事件

onBlur function 
//当文本框失去焦点的时候调用此回调函数。

onChange function 
//当文本框内容变化时调用此回调函数。

onChangeText function 
//当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。

onEndEditing function 
//当文本输入结束后调用此回调函数。

onFocus function 
//当文本框获得焦点的时候调用此回调函数。

onLayout function 
//当组件挂载或者布局变化的时候调用，参数为{x, y, width, height}。

onScroll function 
//在内容滚动时持续调用，传回参数的格式形如{ nativeEvent: { contentOffset: { x, y } } }。 也可能包含其他和滚动事件相关的参数

onSelectionChange function 
//长按选择文本时，选择范围变化时调用此函数，传回参数的格式形如 { nativeEvent: { selection: { start, end } } }。

onSubmitEditing function 
//此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此函数不可用。

onKeyPress function 
//当一个键被按下的时候调用此回调。传递给回调函数的参数为{ nativeEvent: { key: keyValue } }，其中keyValue即为被按下的键。会在onChange之前调用。

3. 方法

isFocused(): boolean 
//返回值表明当前输入框是否获得了焦点。

clear() 
//清空输入框的内容。

六. Image

1. 加载图片的方式

RN项目中的图片.png iOS中的图片.png 
      <View style={styles.mainStyle}>
            {/*组件*/}
            <Text>1. 加载RN项目中的资源</Text>
            <Image
                style={styles.imageStyle}
                source={require('./BenzImage/Benz-GLA1.jpg')}
            />

            <Text>2. 加载iOS项目中的资源</Text>
            <Image
                style={styles.imageStyle}
                source={{uri: 'Benz-GLA2'}}
            />

            <Text>3. 加载https网络资源</Text>
            <Image
                style={styles.imageStyle}
                source={{uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513422273696&di=4d6b5ad6af91e9dfc5df8dbcdc068ed6&imgtype=0&src=http%3A%2F%2Fimg6.taoche.cn%2F1b%2F021701pc9d.jpg'}}
            />

            <Text>4. 加载http网络资源</Text>
            <Image
                style={styles.imageStyle}
                source={{uri: 'https://img.haomeiwen.com/i4122543/ae133247aa24204e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620'}}
            />

        </View>

2. 相关属性介绍

3. 监听图片加载方法

onLayout function 
//当元素挂载或者布局改变的时候调用，参数为：{nativeEvent: {layout: {x, y, width, height}}}.

onLoad function 
//加载成功完成时调用此回调函数。

onLoadStart function 
//加载开始时调用

onLoadEnd function 
//加载结束后，不论成功还是失败，调用此回调函数。

onError function 
//当加载错误的时候调用此回调函数，参数为{nativeEvent: {error}}

onPartialLoad  function 
//如果图片本身支持逐步加载，则逐步加载的过程中会调用此方法。“逐步加载”的具体定义与具体的标准和实现有关。

onProgress function 
//在加载过程中不断调用，参数为{nativeEvent: {loaded, total}}

4. Image类方法

static getSize(uri: string, success: (width: number, height: number) => void, failure: (error: any) => void) 

static prefetch(url: string) 
//预加载一个远程图片(将其下载到本地磁盘缓存)。

5. 示例代码

export default class App extends Component<{}> {
    constructor(props){
        super(props)

        this.state = {
            wid: 100,
            hei: 100
        }
    }

    componentDidMount() {
        Image.getSize('https://img.haomeiwen.com/i4122543/ae133247aa24204e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620', (width, height)=>{
            this.setState({
                wid:width,
                hei:height
            })
        }, (error)=>{
            alert(error)
        })
    }

    // 当一个组件要显示的时候,就会自动调用render,渲染组件
    //
    render() {
        return (
            <View style={styles.mainStyle}>
                <Text>加载iOS项目中的资源</Text>
                <Image
                    style={[styles.imageStyle, {width: this.state.wid, height: this.state.hei}]}
                    source={{uri: 'https://img.haomeiwen.com/i4122543/ae133247aa24204e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620'}}
                    blurRadius={0}
                    resizeMode='contain'
                    // defaultSource={{uri: 'Benz-GLA2', scale: 1.0}}
                    onLoad={()=>{
                        console.log("图片加载完成")
                    }}
                    onLoadStart={()=>{
                        console.log('图片开始加载')
                    }}
                    onLoadEnd={()=>{
                        console.log('图片加载结束')
                    }}
                    onProgress={(progress)=>{
                        console.log(progress.nativeEvent.total)
                        console.log(progress.nativeEvent.loaded)
                    }}
                    onError={()=>{
                        alert('图片加载错误')
                    }}
                />
            </View>
        )
    }
}


// 4.样式表 组件外观 尺寸,颜色
const styles = StyleSheet.create({
    mainStyle:{
        flex:1,
        backgroundColor: 'white',
        justifyContent:'center',
        alignItems:'center'
    },
    imageStyle:{
        width:150,
        height:150,
        backgroundColor:'yellow'
    }
});

参考文献:

1. ReactNative之基本组件（七）

2. React Native 中文网

上一篇 下一篇

猜你喜欢

热点阅读