React Native基础<三>开发常用技巧

1、无状态组件
我们在开发React Native的时候有时候会把样式相同的组件抽离出来，比如ListViewCell，但又不想单独写个组件，这个时候就可以使用无状态组件，具体用法如下:

class DeviceInfo extends Component {
  static navigationOptions = () => (
    {
      header: () => <Header title="设备详情"></Header>
    }
  )
  render() {
    //props可以作为组件接受的任何参数，在组件内部供取值使用！！！！
    const ItemCell = props => (
      <View style={styles.deviceInfo}>
        <Image source={require('../imgs/device/device.png')} style={styles.iconStyle}/>
        <View style={styles.inforWrap}>
         <Text>{props.data.name}</Text>
         <Text>{props.data.info}</Text>
        </View>

      </View>
    )
    return (
      <ScrollView contentContainerStyle = {styles.container}>
        <View style={styles.sectionStyle}>
          <ItemCell data={{name:'设备名称',info:'皖K2D502'}}></ItemCell>
          <ItemCell data={{name:'设备类型',info:'GT200'}}></ItemCell>
          <ItemCell data={{name:'设备名称',info:'皖K2D502'}}></ItemCell>
        </View>

      </ScrollView>
    );
  }
}

2、通过ref找到原生DOM元素.
3、ImageBackground 组件，作为背景图使用，里面可以嵌套其他组件。

<ImageBackground style={styles.container} 
                  source={require('../imgs/login/login_bg.png')} 
                  resizeMode="stretch">
   <Text>可以在这里嵌套其他组件使用</Text>
</ImageBackground>

4、页面传值
使用DeviceEventEmitter。相当于ios开发中的全局通知一样，使用的时候需要先注册监听，在页面销毁的时候也需要移除监听

import {
     AppRegistry,
     StyleSheet,
     Text,
     View,
     DeviceEventEmitter
 } form 'react-native';

//添加监听
componentDidMount() {
  this.subscription = DeviceEventEmitter.addListener('userNameDidChange',(userName) =>{
          alert('通知');
     })
},

//移除监听
componentWillUnmount() {
    // 移除
    this.subscription.remove();
},

//发送通知
DeviceEventEmitter.emit('userNameDidChange', '通知来了');

5、Text组件 超出部门省略号展示

<Text></Text>组件默认支持超出内容省略号显示，但前提是必须有宽度，或者父组件必须有宽度
6、Text组件 嵌套实现富文本效果

要实现图示效果

image.png
一开始使用一个View组件包括两个Text组件，然后在通过样式调整来实现，发现并不起作用，如下图
image.png

代码如下

 <View style={{flexDirection: 'row'}}>
     <Text style={{fontSize:13, color:'red'}}>{"温馨提示:  "}</Text>
          <Text style={{fontSize:Unity.SmallFont, marginLeft: 5, color: Unity.DetailColor}}>{"你可以对帖子的相关问题进行提问，商家会第一时间回答您的问题!你的咨询" +
                  "可能会在上方展示供其他网友参考,登录后咨询你可在个人中心-消息提醒中及时查看商家" +
                  "的回复。"}
     </Text>
              
 </View>
                 

后查到可以使用 Text组件嵌套的形式实现效果

   <View style={{borderBottomColor: Unity.LineColor, borderBottomWidth: 1, paddingBottom: 10}}>
                <Text style={{lineHeight: 16}}>
                  <Text style={{fontSize:13, color:'red'}}>{"温馨提示:  "}</Text>
                  <Text style={{fontSize:Unity.SmallFont, marginLeft: 5, color: Unity.DetailColor}}>{"你可以对帖子的相关问题进行提问，商家会第一时间回答您的问题!你的咨询" +
                  "可能会在上方展示供其他网友参考,登录后咨询你可在个人中心-消息提醒中及时查看商家" +
                  "的回复。"}</Text>
                </Text>
              </View>          

image.png

7、拨打电话

import {Linking} from 'react-native';
function callMe() {
  return Linking.openURL('tel:110');
}