Текстовый компонент внутри формы ввода - PullRequest
Новая
       10

Текстовый компонент внутри формы ввода

0 голосов
/ 04 мая 2018

Моя цель - иметь компонент внутри ввода. Это мои варианты, которые я передаю в форму от 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 внутри

Чего мне не хватает и как я могу это сделать?

Редактировать

Вы можете увидеть здесь: https://snack.expo.io/HJrXcUtaM, но я пытаюсь получить этот текст Post справа от ввода, поэтому я могу иметь onPress для его отправки. Тем не мение; Я не могу получить текст на входе по какой-то причине.

1 Ответ

0 голосов
/ 04 мая 2018

Вам необходимо переопределить компонент по умолчанию Textbox с помощью пользовательского компонента Comment. Смотри 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,
            },
          },
        },
      },
    },
  };
...