Can I word-break at a specific character with react native?-CodePudding

I'm using react native to create a category table. Is there any way I can make the characters(texts) inside the table to line break at after or before a specific character?

for example : apple/banana/avocado

I want it to render like this (line break at after 'slashes') : apple/banana/</ br>avocado

Thanks,

CodePudding user response：

Yes, it is possible. Like in a normal react application you can use the following javascript functions:

Split your string on each "/", example:

var elements = yuourString.split(/\//)

Then you can use Map to render an object for each element, example:

elements.map(x => <SomeReactNativeComponent />);

CodePudding user response：

You could take match instead of split by taking some non breaking character, a breaking character and other non breking character.

const names='banana/apple/mango/grapes';
const result=names.match(/([A-z] \/[A-z] )/g);
console.log(result)

After breaking the names into an array you can simply map them in react native

CodePudding user response：

Expanding on my comment demo:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

const string = 'apple/banana/avocado';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={{ marginBottom: 10 }}>
        Before Change:{'\n '} {string}
      </Text>
      <Text style={{ marginBottom: 10 }}>
        After Change:{'\n '} {string.replaceAll('/', '\n  ')}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  
});