十七、使用refs修改控件style

发表于 | 分类于

首先对ref使用做下笔记。有2种使用方式：
方式一：this.refs.xxx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default class GatherDetailPage extends Component {

	render(){
		return(
			<Text
				ref='saveTextRef'
				onPress={()=>alert(1)}
				style={{width:'100%', height:60, textAlignVertical:'center'}}
				>
				保存数据
				</Text>
		)
	}
}
this.refs.saveTextRef即代表Text控件



方式二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default class GatherDetailPage extends Component {

	render(){
		return(
			<Text
				ref={ item => this.saveTextRef = item}
				onPress={()=>alert(1)}
				style={{width:'100%', height:60, textAlignVertical:'center'}}
				>
				保存数据
				</Text>
		)
	}
}
this.saveTextRef即代表该Text控件



接下来说重头戏，怎么用ref来改变该控件的style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export default class GatherDetailPage extends Component {

	render(){
		return(
			<View style={{flex:1}}>
				<Text
					ref={ item => this.saveTextRef = item}
					onPress={()=>alert(1)}
					style={{width:'100%', height:60, textAlignVertical:'center'}}
					>
					保存数据
				</Text>
				<TextInput
                    style={{width: '100%', height:60}}
                    underlineColorAndroid={'transparent'}
                    placeholder='你们这群ABC'
                    placeholderTextColor='#bbb'
                    multiline={false}
                    onChangeText={(input) => {this.onChangeText(input)}}
                />
			</View>

		)
	}
	
	onChangeText(inputText) {
		console.warn(typeof this.saveTextRef.setNativeProps);
		this.saveTextRef.setNativeProps({style:{backgroundColor:'#f40'}})
    }
}

输入一个字符，可以看到text的背景色变为了红色。并且打印出了function.也即 this.saveTextRef.setNativeProps 是个函数类型。
但是：我做了一个测试。对于Button控件，setNativeProps 打印出来是undefined.也就是不可以对Button设置style。见如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
	render(){
		return(
			<View style={{flex:1}}>
				<Button
					ref={ item => this.saveBtnRef = item}
					onPress={()=>alert(1)}
					style={{width:'100%', height:60, textAlignVertical:'center'}}
					>
					保存数据
				</Text>
				<TextInput
                    style={{width: '100%', height:60}}
                    underlineColorAndroid={'transparent'}
                    placeholder='你们这群ABC'
                    placeholderTextColor='#bbb'
                    multiline={false}
                    onChangeText={(input) => {this.onChangeText(input)}}
                />
			</View>

		)
	}
	
	onChangeText(inputText) {
		console.warn(typeof this.saveBtnRef.setNativeProps);
		this.saveBtnRef.setNativeProps({style:{backgroundColor:'#f40'}})
    }
输入字符后会崩溃。因为	typeof this.saveBtnRef.setNativeProps 打印出的是 undefined.