react-native-vertical-text/VerticalText.js at master · CS6/react-native-vertical-text · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
} from 'react-native';
// import PropTypes from 'prop-types';


// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');


export default class VerticalText extends Component {

  // constructor(){
  //   super()
  //   this.state = {
  //     selectedItems: [],
  //   }
  // }
  componentDidMount() {


  }


  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) {
          // if (name.length > 5) {
          //     name = name.substr(0, 5);
          // }
          //替換字元
          // if (longText[index] == " ") {
          //   return <View style={{ textAlign: "center", borderWidth: 1, }}>

          //   <Text style={styles.CHfont}></Text>
          // </View>          }
          // else if (longText[index] == "，") {
          //   return <View style={{ textAlign: "center", borderWidth: 1, }}>

          //   <Text style={styles.CHfont}>[，]</Text>
          // </View>          }
          // else{
          //   return <View style={{ textAlign: "center", borderWidth: 1, }}>

          //   <Text style={styles.CHfont}>   {longText[index]}  </Text>
          // </View>
          // }

          return <View style={{ textAlign: "center",  }}key = { index }>

<Text style={[styles.CHfont,LineFontSize]}>   {longText[index]}  </Text>
        </View>

        })}
      </View>
    );
      // <verticalText text={"安安專為數位游牧打造的共享辦公室，遠眺大dd   台中城市景色的高樓視野，靜謐的工作環境充滿療癒的綠色植栽，舒適與友善的社群友善空間，提供新創團隊的工作氛圍，咖啡安安專為數位游牧打造的共享辦公室，遠眺大台中城市景色的高樓視野，靜謐的工作環境充滿療癒的綠色植栽，舒適與友善的社群友善空間，提供新創團隊的工作氛圍，咖啡"}/>


  };
}


const styles = StyleSheet.create({
  container: {
    flex: 10,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: "column",
    backgroundColor: '#FFFFFF',
  }, textView: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#aaeb23',
  }, textLine: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCaa',
  }, CHfont: {
    // textAlign: "center",
    fontSize: 18,
    // color: "#FFFFFF",
    // width: 49,
    // flex: 1,
    //justifyContent: 'center',
    // alignItems: 'center',
  }


});