Question

如何在表单字段中添加占位符和多行文本输入？反应原生？

我想在主题行中添加一个占位符，并且希望我的消息字段为多行我试图添加占位符和多行，但我认为我没有正确使用它。请帮帮我

    import React, { Component } from 'react';
    import { View, StyleSheet, Button, TextInput } from 'react-native';

import t from 'tcomb-form-native';

const Form = t.form.Form;

const User = t.struct({
name: t.String,
email: t.String,
subject: t.String,
message: t.String
});

const formStyles = {
  ...Form.stylesheet,
 formGroup: {
 normal: {
  marginBottom: 10
},
},
controlLabel: {
normal: {
  color: 'blue',
  fontSize: 18,
  marginBottom: 7,
  fontWeight: '600'
},
// the style applied when a validation error occours
error: {
  color: 'red',
  fontSize: 18,
  marginBottom: 7,
  fontWeight: '600'
 }
 }
}

const options = {
fields: {
name: {
  error: 'Please enter your name',

},
email: {
  error: 'Please enter your email adress'
},
message: {
  error: 'Please enter message'
 },
},
stylesheet: formStyles,
};

export default class App extends Component {
handleSubmit = () => {
const value = this._form.getValue();
console.log('value: ', value);
}

render() {
return (
  <View style={styles.container}>

    <Form 
      ref={c => this._form = c}
      type={User} 
      options={options}
    />
    <Button
      title="Send Message"
      onPress={this.handleSubmit}
    />
   </View>
  );
 }
}

const styles = StyleSheet.create({
container: {
justifyContent: 'center',
marginTop: 50,
padding: 20,
backgroundColor: '#ffffff',

 },
});

https://snack.expo.io/SJiexSeiW

链接到目前我的代码以在小吃博览会上查看

如何在表单字段中添加占位符和多行文本输入？反应原生

0 个答案: