react-native-vertical-text

A simple and fully customizable React Native component that implements a vertical text UI.

                  

Installation

If using yarn:

yarn add react-native-vertical-text

If using npm:

npm i react-native-vertical-text

Usage

import VerticalText from 'react-native-vertical-text';

Simply place a <VerticalText /> tag for each desired

        <View style={{flexDirection:'row'}}>
  <VerticalText   style={{backgroundColor: '#aFFF', color: "black",fontSize: 10,borderWidth: 1,}} text={"1Monospace專為數位游牧打造的共享空間"}/>
         <VerticalText   style={{backgroundColor: 'black', color: "#FFF",fontSize: 15,borderWidth: 1,}} text={"2monospace專為數位游牧打造的共享空間"}/>
         <VerticalText   style={{backgroundColor: '#FFF', color: "black",fontSize: 20,}} text={"3Monospace專為數位游牧打造的共享空間"}/>
         <VerticalText   style={{backgroundColor: '#F79', color: "red",fontSize: 25,}} text={"4Monospace專為數位游牧打造的共享空間的"}/>


        </View>
       

Documentation

export default class VerticalText extends Component {
  render() {
    // let lineText = 24;//每行文字數量
    let longText =this.props.text;
    // list[longText.length] = {};
    let LineFontSize ={ ...this.props.style }

    let list = longText.split('');
    return (
      <View style= {[{ height: 500,
        alignItems: 'center', justifyContent: 'flex-start', flexDirection: "column", flexWrap: "wrap-reverse", 
    }, { ...this.props.style }]}>
       {list.map(function (val, index) {
          //替換字元
          return <View style={{ textAlign: "center",  }}key = { index }>
<Text style={[styles.CHfont,LineFontSize]}>   {longText[index]}  </Text>
        </View>
        })}
      </View>
    );
  };
}

verticalText Component

Name	Description	Default	Type
borderWidth	Width for the text	6	Number
borderStyle	Type of border for the text	solid	String
backgroundColor	backgroundColor for the text	#4bb543	String
color	Color for the text	#ebebe4	String
fontSize	fontSize for the text size	#ebebe4	String

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

Author

License

MIT