时间戳

首页 > 解决方案 > 表单输入中的文本组件

react-native - 表单输入中的文本组件

问题描述

我的目标是在输入中有一个组件。这些是我传递给表单的选项import t from 'tcomb-form-native'; 

commentFormOptions = {
  fields: {
    comment: {
      label: 'What do you think?',
      placeholder: 'Type your reply',
      stylesheet: InputStylesheet,
      returnKeyType: 'done',
      onSubmitEditing: () => {
        this.postComment();
      },
    },
  },
}

在这里你可以看到视图在哪里：

<View style={styles.container}>
  <KeyboardAvoidingView
    style={styles.commentForm}
    <Form
      ref={ref => this.form = ref}
      type={CommentModel}
      options={this.commentFormOptions} />
  />
    <TouchableHighlight>
      <Text style={{ padding: 10, fontSize: 42 }}>Post</Text>
    </TouchableHighlight>
  </KeyboardAvoidingView>
</View>

我不确定我是否完全理解为什么我不能进入并传入 TouchableHighlight 和 Text inside

我错过了什么，我该怎么做？

编辑

你可以在这里看到：https ://snack.expo.io/HJrXcUtaM但我试图在输入的右侧获取那个 Post 文本，所以我可以有一个 onPress 来提交它。然而; 由于某种原因，我无法获取输入中的文本。

标签： react-nativetcomb-form-native

解决方案

您需要Textbox使用自定义组件覆盖默认Comment组件。见https://snack.expo.io/ByA_EdYTG。

如果您需要将Post按钮包裹在TextInput边框内，您需要创建自己的样式并设置样式（在包含andTextInput的整个容器周围放置边框）。TextInputTouchableHighlight

const { Form, Textbox } = t.form;

const Comment = props => (
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
    }}>
    <Textbox {...props} />
    <TouchableHighlight style={styles.postButton} onPress={props.onPress}>
      <Text style={{ padding: 10, fontSize: 20 }}>Post</Text>
    </TouchableHighlight>
  </View>
);

export default class App extends Component {
  static navigationOptions = {
    title: 'Comments',
  };

  commentFormOptions = {
    fields: {
      comment: {
        label: 'What do you think?',
        placeholder: 'Type your reply',
        returnKeyType: 'done',
        factory: props => (
          <Comment {...props} onPress={() => console.log('pressed')} />
        ),
        stylesheet: {
          ...Form.stylesheet,
          textbox: {
            ...Form.stylesheet.textbox,
            normal: {
              ...Form.stylesheet.textbox.normal,
              width: Dimensions.get('window').width - 70,
            },
          },
        },
      },
    },
  };

推荐阅读