2017-05-16 97 views
0

React Nativeの段落の最初の行をインデントする必要があります。しかし、共通のCSS text-indentプロパティ(textIndent)の使用はReact Nativeと互換性がなく、どちらも擬似要素セレクタ(:first-lineなど)ではありません。 <Text>タグ内の行全体をラップして独自のスタイルを定義することなくこれを行う方法はありますか?どの単語が段落の最初の行に表示されるかは、あるデバイスのビューポートから別のデバイスのビューポートにいくらか不確定性があります。React Nativeのテキストインデント

答えて

-1

これを行う最も簡単な解決策は、いくつかのスペースを手動で入力することです。

let myText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore'; 
<Text numberOfLine={5}>{'  ' + myText}</Text> 
部品の

全例...

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

class IdentedText extends Component { 

    render() { 
     let myText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore'; 

     return (
      <View> 
       <Text numberOfLine={5}>{'  ' + myText}</Text> 
      </View> 
     ); 
    } 
} 

また、スペースのテキストや量を受け入れるヘルパー関数を書くことができます。

+0

多くの行がある場合、この解決法は機能しません。 –