怎样学习一个第三方组件

学习react native 面对一个很严峻的问题，你做很多事情需要引入第三方组件，可我依然在

1. 寻找合适的组件（需要经历查找 和 比较几个组件优劣，这里存在一个极大的问题，一个糟糕的组件带来的工作量非常大）

2. 学习使用这个组件，依然面临一个问题，如何不能将这个组件重复应用于其它地方，很快会忘记用法，和它的名字

组件的数量 > 我们实际所需 （这跟信息过量的世界一个道理，需要做取舍）

 

如果像普通一个程序员那样，学完不去思考，过了就过了，自然的等待着积累数量 引起质变，质变的事情根本就不可能发生。

 

所以最重要的不是资源，而是头脑中清晰的知道自己想要什么，不要什么，是Moadl而不是Dialog。

 

1. Modal 弹出层

react-native-modal-selector（用于分类选择）

主要难受就在于，onchange改变数据看不到，getSelectedItem()函数也不知道咋用 ，两个字“恶心”

<ModalSelector
                    data={formatData}
                    keyExtractor={item=>item.key}  //渲染数据项用的
                    labelExtractor={item=> item.label}   //渲染数据项用的
                    cancelText="关闭" //关闭分类，选择器蒙层的按钮
                    visible={this.state.modalStatus}                   
                    initValue="为内容选择分类" 

                   //只有在这里，设置一个函数，才能进行数据的更新                         
                   onModalClose={(item)=>this.customerData(item)}
                   //关闭取消按钮

                    cancelButtonAccessibilityLabel={"Cancel Button"}

                    cancelButtonAccessible={false}

                    cancelContainerStyle={{ opacity: 0 }}

/>       

 customerData(item){
      // 将 labelCategoryId定义成全局变量 ，之后提交就可以了
      labelCategoryId = item.key;
 }

 

2. 富文本编辑器

 react-native-pell-rich-editor

自定义RichToolbar

// 1. 导入action对象，这里面包含很多预定义操作，但作者只实现默认的6个
import {RichEditor,RichToolbar,actions} from 'react-native-pell-rich-editor';

// 2. 自定操作，都发生在 actions里面  ，当然iconMap用来对接操作的图标，详细的解释看文档

  <RichToolbar
                    getEditor={() => this.richtext}
                    actions={[                
                        actions.insertImage,
                        actions.setBold,
                        actions.setItalic,
                        actions.insertBulletsList,
                        actions.insertOrderedList,
                        "selectCategory" //操作名 = 图标键值
                    ]}
                    iconMap={{
                      selectCategory:require('../imgs/home1_icon.png'),
                    }}
                   
   />

 

3.  跨平台显示的webview

react-native-webview

遇到一个关键问题，显示的页面可以缩放，当然那不是图片大小问题 ，而是webview本身需要一些设置

 

 

<WebView 
                    originWhitelist={['*']}
                    source={{ html: htmlText }}                 />

// htmlText,是一段标签字符串 ，防止缩放，关键要在标签字符串的meta上设置如下代码，根本不需要运行js脚本，条件这个标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

 

4. dialog 自定义对话框

React Native Simple Dialogs
效果图，

 

import React, {Component} from 'react';
import {StyleSheet, Text, View, TextInput, ScrollView} from 'react-native';
import { Dialog } from 'react-native-simple-dialogs';


class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      dialogVisible: true,
      messageContent:'',
    }
  }
  render() {
    return (
      <View >
      <Dialog
          dialogStyle={{borderRadius:10}}
          visible={this.state.dialogVisible}
          title="留言"
          onTouchOutside={() => this.setState({dialogVisible: false})} >
          <View>
              <ScrollView
                showsVerticalScrollIndicator={true}
              >
                <TextInput 
                  placeholder="在这里留下你的言语"
                  onChangeText={text => this.setState({messageContent:text})}
                  multiline={true}
                  style={styles.customerTextInput}
                />
              </ScrollView>
              <View style={{width:285,marginTop:15,flex:0,flexDirection:'row',justifyContent:'space-between'}}>
                  <Text style={styles.cancelButtonStyle}>取消</Text>
                  <Text style={styles.confirmButtonStyle}>确认</Text>                
              </View>
          </View>
      </Dialog>
        <Text style={{fontSize:28}} onPress={()=>this.setState({dialogVisible:true})}>显示</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',    
  },
  customerTextInput:{
    width:285,height:162,backgroundColor:'#EDEDED',color:'red',borderRadius:6,
    textAlignVertical: "top",
  },
  cancelButtonStyle:{
    width:135,height:44,backgroundColor:'#E8EAF1',
    color:'#5B5D64',fontSize:16,textAlign:'center',textAlignVertical:'center',
    borderRadius:2,
  },
  confirmButtonStyle:{
    width:135,height:44,backgroundColor:'#335484',
    color:'#FFFFFF',fontSize:16, borderRadius:2,
    textAlign:'center',textAlignVertical:'center', 
  }
});
export default App;

 

4. react-native-event-resource （SSE服务器发送事件）