react-navigation

安卓端React Navigation的TabNavigator選項卡與react-native-scrollable-tab-view、FlatList一塊兒使用，只顯示第一頁的內容。

解決方案： 給TabNavigator增長lazy: true 屬性，官方解釋，whether to lazily render tabs as needed as opposed to rendering them upfront

FlatList 初始化時不顯示列表，須要拖拽一下才顯示當 React Navigation 與 FlatList 配合使用時，會出現初始化時不顯示列表的bug，必需要拖拽一下，纔會正常顯示

解決方案： 此時須要給FlatList設置removeClippedSubviews={false} 屬性，便可解決問題(目前最新版0.46貌似已經解決了此bug)，官方文檔解釋以下：

注意：removeClippedSubviews屬性目前是沒必要要的，並且可能會引發問題。若是你在某些場景碰到內容不渲染的狀況（好比使用LayoutAnimation時），嘗試設置removeClippedSubviews={false}。咱們可能會在未來的版本中修改此屬性的默認值。

快速點擊重複跳轉

react-navigation目錄下src/addNavigationHelpers.js

export default function<S: *>(navigation: NavigationProp<S, NavigationAction>) {
  // 添加點擊判斷
  let debounce = true;
  return {
      ...navigation,
      goBack: (key?: ?string): boolean =>
          navigation.dispatch(
              NavigationActions.back({
                  key: key === undefined ? navigation.state.key : key,
              }),
          ),
      navigate: (routeName: string,
                 params?: NavigationParams,
                 action?: NavigationAction,): boolean => {
          if (debounce) {
              debounce = false;
              navigation.dispatch(
                  NavigationActions.navigate({
                      routeName,
                      params,
                      action,
                  }),
              );
              setTimeout(
                  () => {
                      debounce = true;
                  },
              500,
              );
              return true;
          }
          return false;
      },
    /**
     * For updating current route params. For example the nav bar title and
     * buttons are based on the route params.
     * This means `setParams` can be used to update nav bar for example.
     */
    setParams: (params: NavigationParams): boolean =>
      navigation.dispatch(
        NavigationActions.setParams({
          params,
          key: navigation.state.key,
        }),
      ),
  };
}

單頁面設置navigationOptions中, 使用this

static navigationOptions = ({navigation, screenProps}) => ({
        headerTitle: '登陸',
        headerLeft:(
            <Text  onPress={()=>navigation.state.params.navigatePress()} style={{marginLeft:5, width:30, textAlign:"center"}} >
                <Icon  name='ios-arrow-back'size={24} color='white' />
            </Text>
        )
    });

    _onBackAndroid=()=>{
        alert('點擊headerLeft');
    }
    
    componentDidMount(){
        //在static中使用this方法
        this.props.navigation.setParams({ navigatePress:this._onBackAndroid })
    }

大多數頁面都是push(從右往左)，某些頁面想從下往上

const TransitionConfiguration = () => ({
    screenInterpolator: (sceneProps) => {
        const { scene } = sceneProps;
        const { route } = scene;
        const params = route.params || {};
        const transition = params.transition || 'forHorizontal';
        return CardStackStyleInterpolator[transition](sceneProps);
    },
});


const Navigator = StackNavigator (
    {

        // Root:{screen: FilterNews},
        Root: {screen: Tab},
        
        CompanyDetail: {screen: CompanyDetail},
        LawOption: {screen: LawOption},
    },

    {
        transitionConfig: TransitionConfiguration,
        initialRouteName: 'Root',
        navigationOptions: {    //不要在此處設置 不然後面所有被覆蓋
            headerStyle: [Style.shadow, {backgroundColor: 'white',borderBottomColor:'white'}],
            headerBackTitle: null,
            headerTintColor: '#192847',// 返回箭頭顏色
            showIcon: true,
            swipeEnabled: true,//是否能夠滑動返回
            animationEnabled: true,//是否帶動畫
            gesturesEnabled: true,// 是否支持手勢返回
            headerTitleStyle: {fontSize: 18, color: Color.textBlack, alignSelf:'center'},//定義title的樣式
            cardStyle: {
                backgroundColor: 'transparent',
            },
        },

        // transitionConfig: (): Object => ({
        //     containerStyle: {
        //         backgroundColor: 'transparent',
        //     },
        // }),
    }
)

// 使用的時候 ，參數加一個 transition: 'forVertical'
this.props.navigation.navigate('Login', {transition: 'forVertical', someValue: 0})

從下往上背景色是黑色

react-navigation/src/views/CardStack/TransitionConfigs.js
裏 ModalSlideFromBottomIOS -> backgroundColor 改成 ‘#fff’

android 有鍵盤的時候會把 tabBar 頂起來（tabBar懸浮在鍵盤上方）

工程目錄->android->app->src->main->AndroidManifest.xml-> <activity android:name=".MainActivity"

android:windowSoftInputMode="adjustResize"

替換爲

android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

返回指定頁面

tabA 跳轉到 tabB (tabNavigator, tabA頁面內點擊某個按鈕跳轉到tabB)

android 標題不居中

方案一：

const Stack = StackNavigator(
    {
        Tab: {
            screen: Tab,
            navigationOptions: ({navigator}) => ({
                // drawerLockMode: 'locked-closed',
            })
        },

        First: {screen: First},
    },
    {
        navigationOptions: {
            headerBackTitle: null,
            headerTitleStyle: {fontSize: Common.headrTitleSize, alignSelf: 'center', textAlign: 'center'},//定義title的樣式
            headerRight: (
                <View />
            )
        },
    }
)

總處設置， 基本 OK
具體頁面內設置的navigationOptions 會覆蓋上面總處 navigationOptions 的選項
具體頁面內 navigationOptions 若是從新設置了 headerTitleStyle， 就須要在具體處headerTitleStyle 添加 alignSelf: 'center'
另外方案一在沒有返回按鈕的頁面中標題可能會偏左，解決方案就是相似，在頁面設置 headerLeft 爲一個空View

headerLeft: (
    <View />
)

方案二：
MyProject/node_modules/react-navigation/src/views/Header/Header.js

Line 392

alignItems: Platform.OS === 'ios' ? 'center' : 'flex-start',

替換爲

alignItems: 'center',

Line 196

_renderTitle 方法中註銷掉安卓部分的判斷，或者把下面整段都註銷

if (Platform.OS === 'android') {
      // if (!options.hasLeftComponent) {
      //   style.left = 0;
      // }
      // if (!options.hasRightComponent) {
      //   style.right = 0;
      // }
    }

相對來講方案二更省事，高效，污染少，可是每次 npm install 後都須要從新來一遍