ReactNavigation初始化（一）

一、安装包

1. 安装react-navigation。

yarn add react-navigation
# or with npm
# npm install --save react-navigation

2. 安装react-native-gesture-handler.

yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler

3. 引入原生库到项目中。

react-native link react-native-gesture-handler

二、使用

1. 初始化路由

const AppNavigator = createStackNavigator({
  Home: HomeScreen,
  Details: DetailsScreen,
}, {
    initialRouteName: 'Home',
});

export default createAppContainer(AppNavigator);

或者：

const RootStack = createStackNavigator(
    {
        Home: HomeScreen,
        Details: DetailsScreen,
    },
    {
        initialRouteName: 'Home',
    }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

2. 在屏幕中移动

• 没有跳转效果：

this.props.navigation.dispatch(StackActions.reset({
    index: 0,
    actions: [
        NavigationActions.navigate({ routeName: 'Details' })
    ],
}))

• 有push、pop效果

this.props.navigation.navigate('Details')

navigate功能大致意味着“转到此屏幕，如果要跳转的页面已经在屏幕上，它将不会有任何反应，如果要跳转的页面在之前的栈队列中，它将以pop的形式跳转回去。”

• push跳转

this.props.navigation.push("Details")

push代表都会向导航堆栈中添加新路径

• pop、popToTop跳转

this.props.navigation.pop(2, true)
<!-- 返回到栈顶 -->
this.props.navigation.popToTop()

• goBack返回

this.props.navigation.goBack()

3. 页面间参数的传递

• 传递参数：

/* 1. Navigate to the Details route with params */
this.props.navigation.navigate('Details', {
    itemId: 86,
    otherParam: 'anything you want here',
});

• 接收参数：

/* 2. Get the param, provide a fallback value if not available */
<!--  -->
const { navigation } = this.props;
<!-- 第一个参数为传递过来的参数的key，第二个参数为传递过来的参数的默认值 -->
const itemId = navigation.getParam('itemId', 'NO-ID');
const otherParam = navigation.getParam('otherParam', 'some default value');

4. 配置标题栏

• 普通的导航栏

static navigationOptions = {
    title: 'Home',
  };

• 在标题中使用params

static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  };

• 通过修改prams参数的值修改导航的标题

this.props.navigation.setParams({ otherParam: 'Updated!' })}

• 修改导航标题的样式
  自定义页眉的样式时，使用三个关键特性：headerStyle，headerTintColor，和headerTitleStyle。
  • headerStyle：将应用于View包装标头的样式对象。如果你设置backgroundColor它，那将是你的标题的颜色。
  • headerTintColor：后退按钮和标题都使用此属性作为其颜色。在下面的示例中，我们将色调颜色设置为白色（#fff），因此后退按钮和标题标题将为白色。
  • headerTitleStyle：如果我们想自定义fontFamily，fontWeight等Text为标题样式属性，我们可以用它来做到这一点。
    eg、

static navigationOptions = {
    title: 'Home',
    headerStyle: {
        backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
        <!-- 值为：100、200、300、400、500、600、700、800、900、normal、bold -->
        fontWeight: 'bold',     
    },
};

• navigationOptions跨屏共享
  在构建navigationStack时，将defaultnavigationOptions加入stackConfi中。

/* The header config from HomeScreen is now here */
defaultNavigationOptions: {
    headerStyle: {
    backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
    fontWeight: 'bold',
    },
},

注意：在屏幕组件中定义的navigaitonOptions与其父堆栈导航的默认导航配置合并在一起时，会优先展示屏幕组件中定义的导航配置。

• 自定义导航标题

class LogoTitle extends React.Component {
    render() {
        return (
            <Image
                source={require('./assets/spiro.png')}
                style={{ width: 30, height: 30 }}
            />
        );
    }
}

使用：

static navigationOptions = {
    // headerTitle instead of title
    headerTitle: <LogoTitle />,
};

5. 标题按钮

• 在导航栏右侧添加一个按钮

headerRight: (
    <Button
        title="Info"
        onPress={ () => Alert.alert("提示", "右边按钮")}
        color="#fff"
    />
)

• 标题与其屏幕组件的交互
  • 在组件挂载的时候，将要调用的方法注册成一个属性放在props里。
  • 在导航栏按钮的点击方法里通过获取props里对应的属性值调用该方法。
    eg、

static navigationOptions = ({ navigation }) => {
    return {
        headerTitle: <LogoTitle />,
        headerRight: (
        <Button
            onPress={navigation.getParam('increaseCount')}
            title="+1"
            color="#fff"
        />
        ),
    };
};

componentDidMount() {
    this.props.navigation.setParams({ increaseCount: this._increaseCount });
}

state = {
    count: 0,
};

_increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
};

• 重新返回按钮
  • headerBackTitle 如果想要修改某个页面的返回按钮的标题，就在该页面的父级的navigationOptions里设置对应的值，如果不想显示任何文本，就设置为null，注意不能设置为空字符串，否则无效。
  • headerTruncatedBackTitle 如果headerBackTitle设置的文本过长，就显示不出来了，可以使用headerTruncatedBackTitle设置一个默认的显示。
  • headerBackImage 可以设置返回按钮的对应的图标。