表单输入中的文本组件

Question

我的目标是在输入中包含一个组件。这些是我从 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 来提交它。然而;由于某种原因，我无法在输入中获取文本。

Answer 1

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

如果您需要将 Post 按钮包裹在 TextInput 边框内，您需要创建自己的 TextInput 并设置样式（在包含 TextInput 和 TouchableHighlight).

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,
            },
          },
        },
      },
    },
  };

表单输入中的文本组件

Text Component Inside a Form Input

react-native

tcomb-form-native

编辑