doc,beefe

React Native 双平台差异及解决方案记录

TextInput
iOS下的textAlign取值"auto", 'left', 'right', 'center', 'justify'
android下的textAlign取值为'start', 'center', 'end'

Image
iOS下resizeMode可以写在行间属性，也可以写在style，后者覆盖前者
android下resizeMode只可以写在行间，写在style无效

  //android 
  <Image resizeMode={'stretch'}></Image>
  //ios, style中的cover会覆盖掉stretch
  <Image resizeMode={'stretch'} style={{'resizeMode': 'cover'}}></Image>

iOS平台，native调用React Native functions

见：iOS平台，native调用React Native functions;

如何开发一个react-native android组件

首先按照官网文档的步骤来做：
1. Create the ViewManager subclass
2. Implement method createViewInstance
3. Expose view property setters using @ReactProp (or @ReactPropGroup) annotation
4. Register the ViewManager
5. Implement the JavaScript module
在native组件只有设置属性的时很按照上面的来做很容易就搞定了，但是实际开发中既然是组件，肯定会有相应的事件监听处理和外部调用的方法。

事件的处理：

对于Event的处理也有官方文档，不过对应的.JS文件并不健全，可以参考我写过的react-native-wheel的实现：
WheelViewManager.java：

@ReactProp(name = "onItemChange", defaultBoolean = true)
    public void setOnItemChange(final LoopView view, Boolean value) {
        view.setListener(new OnItemSelectedListener() {
            @Override
            public void onItemSelected(int index) {
                WritableMap event = Arguments.createMap();
                event.putInt("index", index);
                ReactContext reactContext = (ReactContext) view.getContext();
                reactContext.getJSModule(RCTEventEmitter.class)
                        .receiveEvent(view.getId(), "topChange", event);
            }
        });
    }

index.js

var iface = {
    name: 'RCTWheelView',
    propTypes: {
        onItemChange: PropTypes.func,
        values: PropTypes.array,
        isLoop: PropTypes.bool,
        selectedIndex: PropTypes.number,
        textSize: PropTypes.number,
    },
};

var MyWheelView = React.createClass({

    handleOnChange(event){
        if(this.props.onItemChange){
            this.props.onItemChange(event.nativeEvent.index);
        }
    },
    render(){
        return <NativeWheelView {...this.props} onChange = {this.handleOnChange} />;
    }
});

方法的处理：

React-Native的官方文档并没有对应的文档说明，找了好几天都没有找到相应的处理，最终无奈在react-native的github提交了一个issues，然后在@brentvatne的帮助下得以解决
参考以下内容：
ReactViewPagerManager.java：

  @Override
  public Map<String,Integer> getCommandsMap() {
    return MapBuilder.of(
        "setPage",
        COMMAND_SET_PAGE,
        "setPageWithoutAnimation",
        COMMAND_SET_PAGE_WITHOUT_ANIMATION);
  }

  @Override
  public void receiveCommand(
      ReactViewPager viewPager,
      int commandType,
      @Nullable ReadableArray args) {
    Assertions.assertNotNull(viewPager);
    Assertions.assertNotNull(args);
    switch (commandType) {
      case COMMAND_SET_PAGE: {
        viewPager.setCurrentItemFromJs(args.getInt(0), true);
        return;
      }
      case COMMAND_SET_PAGE_WITHOUT_ANIMATION: {
        viewPager.setCurrentItemFromJs(args.getInt(0), false);
        return;
      }
      default:
        throw new IllegalArgumentException(String.format(
            "Unsupported command %d received by %s.",
            commandType,
            getClass().getSimpleName()));
    }
  }

ViewPagerAndroid.android.js：

 /**
   * A helper function to scroll to a specific page in the ViewPager.
   * The transition between pages will be animated.
   */
  setPage: function(selectedPage: number) {
    UIManager.dispatchViewManagerCommand(
      React.findNodeHandle(this),
      UIManager.AndroidViewPager.Commands.setPage,
      [selectedPage],
    );
  },

  /**
   * A helper function to scroll to a specific page in the ViewPager.
   * The transition between pages will be *not* be animated.
   */
  setPageWithoutAnimation: function(selectedPage: number) {
    UIManager.dispatchViewManagerCommand(
      React.findNodeHandle(this),
      UIManager.AndroidViewPager.Commands.setPageWithoutAnimation,
      [selectedPage],
    );
  },

最后就是就像@brentvatne说的 “This isn't the best place to ask this kind of question, as the comment above suggests, you should try StackOverflow.” 提问问题最好去StackOverflow ，再次感谢@brentvatne的回答。

iOS平台，react native调用native functions

见：iOS平台，react native调用native functions

react native通过npm安装的纯js组件之间的依赖关系

比如a模块和b模块同时都依赖于c模块，
那么通过npm安装的a模块和b模块内部的node_modules都包含了c模块，
不知道react-native在打包的时候会不会把c模块提取出来？
还是将c分别打包成了两个模块？
如果是后者，这样会不会产生很多的冗余代码？

beefe / doc Goto Github PK

doc's People

Contributors

Stargazers

Watchers

Forkers

doc's Issues

React Native 双平台差异及解决方案记录

iOS平台，native调用React Native functions

如何开发一个react-native android组件

事件的处理：

方法的处理：

iOS平台，react native调用native functions

react native通过npm安装的纯js组件之间的依赖关系

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent