RN版本UITextFeild的使用

最新推荐文章于 2024-08-09 07:30:10 发布

原创最新推荐文章于 2024-08-09 07:30:10 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

React Native 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个基于React Native的自定义数字输入框组件，该组件使用了数字键盘并具备清除按钮功能，同时设置了特定样式以提升用户体验。

export default class TSUITextField extends Component {
  render() {
    return (
      <View style={styles.container}>
      <TextInput style={styles.inputStyle}
        keyboardType={'number-pad'} 
        placeholder={'我是占位符'}
        clearButtonMode={'always'}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  inputStyle :{
    marginTop:30,
    width:300,
    height:60,
    borderWidth:2,
    borderRadius:10,
    borderColor:'orange'
  }
});