React-Native(二) 统一Navigator 及Fragment 多入口

在原生项目里面加入React-Native之后，我进行了React-web的融合、多Fragment嵌入的实践，以及统一Navigator和平行Router的尝试。PS：占位补图。项目地址

需求

首先需要说明一下需求：
(一) Navigator

React-Native在原生项目中需要考虑多页面跳转的问题，导航栈的管理很重要。
页面之间的数据传递。
完成了导航栈，怎么能不实现titlebar呢...

(二)多入口

项目中仍然是原生大于React，如何处理零碎化的RN界面。
部分Fragment中需要引入RN。

Navigator

官方文档中提到的导航器navigator使用纯JavaScript实现了一个导航栈，根据给出的demo我们可以很容易实现页面跳转功能。
但是这还不够，在原生项目中，我需要统一导航栈，方便数据传递和页面切换。

 return (
     {
        return 
      }}
    />
  );

initialRoute初始属性，renderScene定义路由入口(路由概念)。
将Navigator提升到自定义的component中：

export default class AppNavigator extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return ( < Navigator initialRoute = {
                {
                    //配置路由
                    id: this.props.id,
                    data: this.props.data,
                    name: this.props.name,
                    component: this.props.component
                }
            }
            renderScene = {
                (route, navigator) => {
                    let Scene = route.component;
                    return 
                }
            }
            style = {
                styles.navigatorstyle
            }
            configureScene = {
                (route) => {
                    //配置路由跳转效果
                    if (route.sceneConfig) {
                        return route.sceneConfig;
                    }
                    return Navigator.SceneConfigs.PushFromRight;
                }
            }
            />
        );
    }
}
const styles = StyleSheet.create({
    navigatorstyle: {
        flex: 1
    }
});

在initialRoute中，我们配置路由传递的信息:

 id: this.props.id,//ID，唯一标识
 data: this.props.data,//传递的数据
 name: this.props.name,//字符资源
 component: this.props.component//当前组件

renderScene中我们将配置的这些参数当做一个View组件传递回去，这些参数成为下一个组件的属性:this.props,这样我们就可以获取到navigator对象，并进行push,pop操作。

在入口文件index.android.js中：

return (
      //统一的入口
      
    );

指定setting组件为导航栈栈底组件，因为是入口所以没有data参数可以传递。在setting中实现业务需求:

'use strict';
import React, {
    Component
} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    BackAndroid,
    ToastAndroid,
    Platform
} from 'react-native';
import {
    Button,
    List
} from 'antd-mobile';

import Third from './Third';

const Item = List.Item;
const Brief = Item.Brief;

export default class Settings extends Component {
    constructor(props) {
        super(props);
    }

    _onClick() {
        const navigator = this.props.navigator;
        if (navigator) {
            navigator.push({
                id: 'thirdpage',
                data: '',
                name: 'third',
                component: Third
            });
        }
    }

    render() {
        return (
            
              '个人设置1'}>
                 
                    第一个标题
                 
                 {}}>
                    第二个标题
                 
                 {}}>
                    第三个标题
                 
                 {}}>
                    第四个标题
                 
                 {}}>
                    第五个标题
                 
             
            
        )
    };
    /*
     * 生命周期
     */
    componentDidMount() {
        this._addBackAndroidListener(this.props.navigator);
    }

    componentWillUnmount() {
        this._removeBackAndroidListener();
    }

    //监听Android返回键
    _addBackAndroidListener(navigator) {
            if (Platform.OS === 'android') {
                var currTime = 0;
                BackAndroid.addEventListener('hardwareBackPress', () => {
                    if (!navigator) {
                        return false;
                    }
                    const routers = navigator.getCurrentRoutes();
                    if (routers.length == 1) { //在主界面
                        var nowTime = (new Date()).valueOf();
                        if (nowTime - currTime > 2000) {
                            currTime = nowTime;
                            ToastAndroid.show("再按一次退出RN", ToastAndroid.SHORT);
                            return true;
                        }
                        return false;
                    } else { //在其他子页面
                        navigator.pop();
                        return true;
                    }
                });
            }
        }
        //移除监听
    _removeBackAndroidListener() {
        if (Platform.OS === 'android') {
            BackAndroid.removeEventListener('hardwareBackPress');
        }
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    }
});

其中我们在行组件Item中定义了点击跳转动作，在onclick函数中将下一个组件信息push入栈，基本的入栈过程就完成了。

注意，Item中并没有navigator对象，而是this.props传递给它的。
在代码中我同时添加了Android物理按键的监听，如果监听到物理回退键，那么就执行退栈的操作。

到这里navigator差不多就构建完成了。

多入口

fragment中使用RN,区别与activity中的使用是因为，在activity中ReactRootView替换了原生creatView中返回的view。
同样的我们实现一个父层Fragment，替换掉onCreatView中返回的View，就可以渲染js了：

public abstract class ReactFragment extends Fragment {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    /**
     * 返回appregistry注册的名字.
     * @return
     */
    public abstract  String getMainComponentName();

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        mReactRootView = new ReactRootView(context);
        mReactInstanceManager =
                ((ReactApplication) getActivity().getApplication())
                        .getReactNativeHost()
                        .getReactInstanceManager();
    }

    /**
     * 这里改写根View为ReactRootView,因此继承此类的fragment实现`getMainComponentName`即可.
     * @param inflater
     * @param container
     * @param savedInstanceState
     * @return
     */
    @Nullable
    @Override
    public ReactRootView onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        return mReactRootView;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mReactRootView.startReactApplication(
                mReactInstanceManager,
                getMainComponentName(),
                null
        );
    }


}

同时，我们需要自定义的Application实现ReactApplication:

public class ReactApplication extends Application implements com.facebook.react.ReactApplication{

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return true;
        }

        @Override
        public List getPackages() {
            return Arrays.asList(
                    new MainReactPackage()
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

实现了根Fragment后，子类继承并返回注册的组件名即可：

public class TestFragment extends ReactFragment {
    @Override
    public String getMainComponentName() {
        return "thirdfragment";
    }

}

但，还有一点事情没有做，挂载的Activity还需要实现DefaultHardwareBackBtnHandler接口，以保证RN的生命周期。
参考

public class FragmentActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
 
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        /**
         * Get the reference to the ReactInstanceManager
         */
         mReactInstanceManager =
             ((MyApplication) getApplication()).getReactNativeHost().getReactInstanceManager();


        /*
        * We can instantiate a fragment to show for Activity programmatically,
        * or using the layout XML files.
        * This doesn't necessarily have to be a ReactFragment, any Fragment type will do.
        */

        Fragment viewFragment = new HelloFragment();
        getFragmentManager().beginTransaction().add(R.id.container, viewFragment).commit();
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    /*
     * Any activity that uses the ReactFragment or ReactActivty
     * Needs to call onHostPause() on the ReactInstanceManager
     */
    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause();
        }
    }

    /*
     * Same as onPause - need to call onHostResume
     * on our ReactInstanceManager
     */
    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }
}

剩下的工作则是完成RN组件的编写，并AppRegistry注册组件即可。
这样入口组件就不止一个了，个人感觉其实不是很合理，只能说可以解决需求问题。如果有好的解决方案，希望不吝赐教~

React-Native(二) 统一Navigator 及Fragment 多入口

需求

Navigator

多入口

你可能感兴趣的:(React-Native(二) 统一Navigator 及Fragment 多入口)