Реагировать на нативную текстовую стратегию разбиения слов строк через тире

Question

Настройка

react: 16.6.0-alpha.8af6728
react-native: 0.57.4

Проблема

Разрыв слова в текстовом компоненте не обрабатывает строки с черточками так, как этого хочет дизайн приложения. Я хочу обернуть слово целиком с учетом тире. Вся эта строка с черточками должна рассматриваться как слово при переносе слов. Но flexbox нет.

Код

<TouchableOpacity style={{ width: 250, backgroundColor: 'skyblue' }}>
    <Text style={styles.welcome}>This is a sample of text-with-dash incorrectly word breaking</Text>
</TouchableOpacity>

Результат выглядит так:

Но я хочу, чтобы все закончилось так ( text-with-dash в отдельной строке):

Проблема в том, что я получаю строки из онлайновой CMS и хочу решить эту проблему с помощью стилевого решения flexbox. Может возникнуть ситуация, когда строка с черточкой может оказаться в одной строке, поэтому в этих случаях я не хочу перенос слов причины.

Answer 1

Теперь вы можете использовать textbreakstrategy в качестве реквизита Text .

По умолчанию стратегия разбиения текста: ' highQuality ', чторазбивает слова и добавляет '-' для этих слов.

Используйте ' simple ' в textbreakstrategy, чтобы избежать '-' при разрыве слов.

Например,:

<Text textBreakStrategy={'simple'}>
This is a sample of text-with-dash incorrectly word breaking
</Text>

Дополнительный справочник: https://developer.android.com/reference/android/text/Layout.html#BREAK_STRATEGY_SIMPLE

Answer 2

Не нашел CSS-хитрости для этого.Но вы можете использовать regx для ярлыка.просто добавьте новую строку перед любым переносом слов.это не идеальное решение, но по крайней мере для такой ситуации это будет работать

        export default class App extends Component {
        constructor(props) {
        super(props);

         this.processString = this.processString.bind(this);
        }

         processString() {
         const regex = /((\w+\-(.*?)\w+)\s)/gm;
         const str = `This is a sample of text-with-dash incorrectly word breaking`;
         const subst = `\n$1`;
         const result = str.replace(regex, subst);
         return result;
        }

         render() {
             return (
                  <View style={styles.container}>
          <TouchableOpacity style={{ width: 250, backgroundColor: 
        "skyblue" 
         }}>
          <Text style={styles.welcome}>{this.processString()}</Text>
           </TouchableOpacity>
          </View>
          );
           }
         }