我如何在reactnative中構建一個文本輸入，它有一個占位符，單擊時會在頂部更改為textview-有解無憂

我對本地反應有點陌生，我有一個需要幫助的問題

如何在 react native 中構建文本輸入，該文本輸入有一個占位符，單擊時會更改為頂部的文本視圖？類似于下面的截圖

空文本輸入欄位在默認狀態下看起來像這樣

我如何在 react native 中構建一個文本輸入，它有一個占位符，單擊時會在頂部更改為 textview

輸入資料的文本欄位

我如何在 react native 中構建一個文本輸入，它有一個占位符，單擊時會在頂部更改為 textview

看到空的輸入文本有一個占位符出現在輸入文本欄位的中間

參見第二張圖，一旦用戶開始在輸入欄位中輸入文本，占位符文本就會移動到輸入欄位的頂部

uj5u.com熱心網友回復：

最簡單的方法是使用帶有文本輸入的我如何在 react native 中構建一個文本輸入，它有一個占位符，單擊時會在頂部更改為 textview

uj5u.com熱心網友回復：

這是我在沒有任何庫的情況下使用的作業示例，如果您想將影片添加到帶有影片的欄位作業示例中

import React, { Component } from 'react';
import {
  View,
  StatusBar,
  TextInput,
  Text,
} from 'react-native';

class FloatingLabelInput extends Component {
  state = {
    isFocused: false,
  };

  handleFocus = () => this.setState({ isFocused: true });
  handleBlur = () => this.setState({ isFocused: false });

  render() {
    const { label, ...props } = this.props;
    const { isFocused } = this.state;
    const labelStyle = {
      position: 'absolute',
      left: 0,
      top: !isFocused ? 18 : 0,
      fontSize: !isFocused ? 20 : 14,
      color: !isFocused ? '#aaa' : '#000',
    };
    return (
      <View style={{ paddingTop: 18 }}>
        <Text style={labelStyle}>
          {label}
        </Text>
        <TextInput
          {...props}
          style={{ height: 26, fontSize: 20, color: '#000', borderBottomWidth: 1, borderBottomColor: '#555' }}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          blurOnSubmit
        />
      </View>
    );
  }
}


export default class App extends Component {
  state = {
    value: '',
  };

  handleTextChange = (newText) => this.setState({ value: newText });

  render() {
    return (
      <View style={{ flex: 1, padding: 30, backgroundColor: '#f5fcff' }}>
        <StatusBar hidden />
        <FloatingLabelInput
          label="Email"
          value={this.state.value}
          onChangeText={this.handleTextChange}
        />
      </View>
    );
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/327721.html

標籤：javascript 反应原生

上一篇：在redux中分派多個動作會復制狀態引數

下一篇：通過REST實作Firebase實時資料庫OnSnapShot功能？