芒果 发表于 2017-3-1 14:59:22

react-native-tab-navigator与原生结合

react-native-tab-navigator与原生结合,已经在原生Android应用中集成进了RN的tab-navigator组件,点击下面的icon也会切换图标,但是如何让上面的fragment切换呢?求大神指点,这是index.android.js的代码
render() {
    return (
      <TabNavigator
      tabBarStyle={{ backgroundColor: '#ffffff' }}
      >
      <TabNavigator.Item
          renderIcon={() => <Image source={{ uri: 'iv_discover_off' }} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={{ uri: 'iv_discover_on' }} style={styles.iconStyle} />}
          selected={this.state.selectedTab === 'discover'}
          onPress={() => this.setState({ selectedTab: 'discover' })}
      >
          <Discover />
      </TabNavigator.Item>
      <TabNavigator.Item
          renderIcon={() => <Image source={{ uri: 'iv_mine_off' }} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={{ uri: 'iv_mine_on' }} style={styles.iconStyle} />}
          selected={this.state.selectedTab === 'mine'}
          onPress={() => this.setState({ selectedTab: 'mine' })}
      >
          <Mine />
      </TabNavigator.Item>
      </TabNavigator>

    );
}

这个是discover页面的代码
export default class Discover extends Component {
    render() {
      return (
            <View style={styles.container}>
                <Text style={styles.welcome}>

                </Text>
            </View>
      );
    }
}
Mine的代码也类似。
下面这个是ActivityMain切换fragment的代码
    public void switchTo(int position) {
      FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
      switch (position) {
            case AppConstant.POS_MENU_HOME:
                SetStatusBarColor();
                transaction.show(mDiscoveryFragment);
                transaction.hide(mMineFragment);
                transaction.commitAllowingStateLoss();
                break;
            case AppConstant.POS_MENU_MINE:
                SetTranslanteBar();
                transaction.hide(mDiscoveryFragment);
                transaction.show(mMineFragment);
                mMineFragment.onResume();
                transaction.commitAllowingStateLoss();
                break;
      }

    }
这个是activity_mian.xml代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <FrameLayout
      android:id="@id/container"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_above="@+id/rnview"
      android:layout_marginBottom="@dimen/common_2dp_corner"/>

    <!--<com.ashokvarma.bottomnavigation.BottomNavigationBar-->
    <!--android:id="@id/bottom_bar"-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="wrap_content"-->
    <!--android:layout_alignParentBottom="true" />-->

    <com.facebook.react.ReactRootView
      android:id="@+id/rnview"
      android:layout_width="match_parent"
      android:layout_height="50dp"
      android:background="@color/white"
      android:layout_alignParentBottom="true"
      />
</RelativeLayout>
求大神指导,不胜感激

610880568 发表于 2017-10-10 00:38:21

fadfadasdfas回复dfasdfa

610880568 发表于 2017-12-15 14:14:59

回复回复回复回复
页: [1]
查看完整版本: react-native-tab-navigator与原生结合