RefView

来源：互联网发布：淘宝刷单详细流程图编辑：程序博客网时间：2024/06/08 13:58

RefView.js

import React, { Component } from 'react';import {  Animated,  Easing,  TextInput,  Text,  StyleSheet,  View,} from 'react-native';class RefView extends Component {    // 构造    constructor(props) {      super(props);      // 初始状态      this.state = {        textInputValue: '文字提示'      };      this.buttonPressed = this.buttonPressed.bind(this);    }    buttonPressed() { //当按钮按下的时候执行此函数      //修改文本输入框的属性值 变为了不可编辑      this.refs.textInputRefer.setNativeProps({        editable:false      });      this.refs.text2.setNativeProps({        style:{          color:'blue',          fontSize:30        }      });    }    render() {      return (          //ref={'text2'}>   //指定本组件的引用名          <View style={styles.container}>              <Text style={styles.buttonStyle} onPress={this.buttonPressed}>                  按我              </Text>              <Text style={styles.textPromptStyle} ref="text2">                  {this.state.textInputValue}              </Text>            <View>              <TextInput style={styles.textInputStyle}                ref="textInputRefer"                // value={"input content"}                onChangeText={(textInputValue)=>this.setState({textInputValue})}              />            </View>              <View></View>        </View>      );    }}const styles = StyleSheet.create({    container: {        flex: 1,        margin: 100,    },    buttonStyle: { //文本组件样式,定义简单的按钮        fontSize: 20,        width : 100,        height : 50,    },    textPromptStyle: { //文本组件样式        fontSize: 20,         height : 50,    },    textInputStyle: { //文本输入组件样式        height: 50,        fontSize: 20,        color: 'red',    }});export default RefView;

示例：

import React from 'react';import {   AppRegistry,   View,   Text,   StyleSheet,   Animated,   Image,} from 'react-native';import RefView from './RefView';class MyFirstProject extends React.Component{    render() {        return (             <View>                 <RefView>                 </RefView>             </View>        );    }}AppRegistry.registerComponent('MyFirstProject', ()=> MyFirstProject);

效果：

阅读全文

0 0