Блог

Главная - Вопросы по программированию - Как сделать разрыв строки в textinput после вставки в него компонента изображения? REACT-NATIVE

Как сделать разрыв строки в textinput после вставки в него компонента изображения? REACT-NATIVE

#javascript #react-native

#javascript #react-native

Вопрос:

я новичок в react-native и делаю блоковую заметку, проблема сейчас в том, что я хочу разрешить пользователю помещать изображения с примечанием, что-то вроде этого:

R

моя структура для этого на данный момент такова:

     render() {
        return (
            <>
            <View style = {this.styles.container}> 
                <TextInput style = {this.styles.TextInput_title} placeholder = "Title" multiline = {true} maxLength = {80} value = {this.state.title} onChangeText = {title => this.setState({title: title})}></TextInput>
                <View style = {this.styles.textinput_container}>
                    <TextInput  style = {this.styles.textinput} multiline = {true} onChangeText = {content => this.setState({content: content})}><Text>{this.state.content}{"n"}</Text>
                    <Text>{this.state.img}</Text>
                    </TextInput>
                    <Button title = "Add image" onPress = {this.add_Image}></Button>
                    <Button title = "Save Changes" onPress = {this.save_Changes}></Button>
                </View>
            </View>
      }

 add_Image = () => {
    this.setState({content: this.state.content   "nnn"});
    const img = <Image source = {require("../img/ny.png")} style = {{width: 100, height: 100}}></Image>
    this.setState({img:img});
}

на данный момент я просто использую кнопку для добавления изображения, чтобы посмотреть, работает ли это, но я получаю это:

введите описание изображения здесь

как вы можете видеть, указатель (синяя линия) все еще там и не делает разрыв строки, возможно, это способ, который я использую для этого, но, как я уже сказал, я новичок, и на данный момент я не знаю другого способа сделать это, поэтому, если кто-нибудь может мне помочь, действительно буду признателен 🙂

Комментарии:

1. вам нужно научиться Flex . reactnative.dev/docs /flexbox

2. привет, все рассказывали мне о flex, но я действительно не знаю, как это реализовать, нет примеров того, что я пытаюсь сделать, даже близко, так что, если вы можете дать мне ориентировку или шаги, с чего можно начать

3. Почему вы вставляете изображение внутри textinput?? Вы можете добавить изображение над textinput и написать комментарий в textinput??

4. Нет, я делаю блоковую заметку, поэтому я хочу разрешить пользователю добавлять img к своей заметке и продолжать писать ниже, если это

Ответ №1:

Вы могли бы добиться этого с помощью некоторых изменений в стиле:

Например:

 <Text style={{ flex: 1, marginTop: '25%' }}>{this.state.img}</Text>

Где,

  1. marginTop: Gona предоставляет вам ту долю пространства, которую вы хотите оставить сверху.

  2. flex: Установите для него значение 1, оно будет помещено в пробел.