react-native 常用组件（三）

2019-01-25  本文已影响0人  Lucky_ce60 
import React, { Component } from 'react';
import { Text, StyleSheet } from 'react-native';

export default class TextInANest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titleText: "Bird's Nest",
      bodyText: 'This is not really a bird nest.'
    };
  }

  render() {
    return (
      <Text style={styles.baseText}>
        <Text style={styles.titleText} onPress={this.onPressTitle}>
          {this.state.titleText}{'\n'}{'\n'}
        </Text>
        <Text numberOfLines={5}>
          {this.state.bodyText}
        </Text>
      </Text>
    );
  }
}

const styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

①嵌套文本：

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

export default class BoldAndBeautiful extends Component {
  render() {
    return (
      <Text style={{fontWeight: 'bold'}}>
        I am bold
        <Text style={{color: 'red'}}>
          and red
        </Text>
      </Text>
    );
  }
}

②嵌套视图（仅限于ios）

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

export default class BlueIsCool extends Component {
  render() {
    return (
      <Text>
        There is a blue square
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        in between my text.
      </Text>
    );
  }
}

③容器
<Text>元素在布局上不同于其它组件：在Text内部的元素不再使用flexbox布局，而是采用文本布局。这意味着<Text>内部的元素不再是一个个矩形，而可能会在行末进行折叠。

<Text>
  <Text>First part and </Text>
  <Text>second part</Text>
</Text>
// Text container: the text will be inline if the space allowed it
// |First part and second part|

// otherwise, the text will flow as if it was one
// |First part |
// |and second |
// |part       |

<View>
  <Text>First part and </Text>
  <Text>second part</Text>
</View>
// View container: each text is its own block
// |First part and|
// |second part   |

// the text will flow in its own block
// |First part |
// |and        |
// |second part|

④样式继承限制
React Native有一部分样式继承的实现，不过仅限于文本标签的子树。在下面的代码里，第二部分会在加粗的同时又显示为红色：

     <Text style={{ fontWeight: "bold" }}>
                    I am bold
                    <Text style={{ color: "red" }}>and red</Text>
     </Text>
属性：
    <View style={styles.baseText}>
                <Text
                    numberOfLines={2}
                    ellipsizeMode='tail'
                    onLongPress={()=>{alert("长按点击文本")}}
                    onPress={()=>{alert("点击文本")}}
                  >
                    On Thanksgiving, celebrated in America on the last Thursday of November,
                    friends and families gather around tables to feast and give thanks.
                    This holiday has origins dating back nearly 400 years when early American
                    settlers met the Native American Wampanoag people.
                </Text>
            </View>
属性：

常用属性：
1.allowFontScaling:控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。类型：bool
2.autoCapitalize控制TextInput是否要自动将特定字符切换为大写，

不常用属性：
1.autoComplete
2.contextMenuHidden
3.disableFullscreenUI
4.enablesReturnKeyAutomatically如果为true，键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。
5.inlineImageLeft
6.inlineImagePadding
7.keyboardAppearance
8.onContentSizeChange
9.returnKeyLabel
10.scrollEnabled
11.spellCheck
12.textBreakStrategy

方法：

clear()：清空输入框的内容。
isFocused()：返回值表明当前输入框是否获得了焦点。

上一篇 下一篇

猜你喜欢

热点阅读