记一次React Native的StackNavigator使用小结

发表于   |   分类于   |   阅读次数

初始化

1
2
3
4
export default (
  routeConfigMap: NavigationRouteConfigMap,
  stackConfig: StackNavigatorConfig = {}
)

在StackNavigator的初始化中需要传入两个参数：routeConfigMap 表示路由配置参数, stackConfig表示配置StackNavigatorConfig一些样式或者属性。

1
2
3
4
5
6
7
8
9
10
11
12
const MainSrceenStackNavigator = StackNavigator(
    {
        MainScreenNavigator: {screen: MainScreenNavigator},
        DiscoverDetail: {screen: DiscoverDetail},
        SettingDetail: {screen: SettingDetail}
    },
    {
        initialRouteName: 'MainScreenNavigator',
        mode:'card',
        headerMode:'screen',
    }
);

上述代码块配置了3个不同路由的界面，initialRouteName设置根导航控制器界面,默认第一个为根路由。mode表示界面的跳转方式:push或者模态弹出。headerMode表示界面在做跳转时的区域。有三种方式:float,screen,none。float表示不包括导航条在内;screen表示整个屏幕(包括导航条);none表示导航条的隐藏。还有很多属性可选配置。用到可在官网查询React Navigation 。

🌰

在我的界面配置导航条样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
static navigationOptions = ({navigation})=>({
        // tabBarLabel: '我的',
        title: '我',
        headerStyle:{
            backgroundColor: 'black'
        },
        headerTitleStyle:{
            color: 'white' 
        },
        tabBarIcon:({tintColor,focused}) => (
            <TabBarItem  
              tintColor={tintColor}  
              focused={focused}  
              normalImage={require('./source/我的@2x.png')}  
              selectedImage={require('./source/我的-选中@2x.png')}  
            />  
        ),
    });

然后再显示出ListView(三个分区的ListView)

1
2
3
4
5
6
7
8
9
constructor(props) {
        super(props);

        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2,sectionHeaderHasChanged:(s1,s2)=>s1 !== s2});
        this.state = {
            dataSource: ds.cloneWithRowsAndSections([['钱包'],['收藏','相册','卡包','表情'],['设置']]),
        };

    }
1
2
3
4
5
6
7
8
9
10
11
render(){
        return (
            <View style={styles.container}>
                <ListView 
                dataSource={this.state.dataSource}
                renderRow={this._renderRow.bind(this)}
                renderSeparator={this._renderSeparator}>
                </ListView>
            </View>
        )
    }

分割线

1
2
3
4
5
6
7
_renderSeparator(sectionID, rowID, adjacentRowHighlighted)  {
        if(sectionID == 1){
        return (
            <View style={styles.separatorStyle}></View>
        )
        }
    }

ListView每个分区每一行的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
_renderRow(rowData, sectionID, rowID, highlightRow){
       if (sectionID == 0) {
           return(
               <TouchableOpacity onPress={() =>{
                   highlightRow(sectionID,rowID),
                   this.props.navigation.navigate('SettingDetail',{'name': rowData})
               }}>
                   <View style={styles.section_0_style}>
                       <Text style={{fontSize:15}}>{rowData}</Text>
                   </View>
               </TouchableOpacity>
           )
       }else if(sectionID == 1){
           return(
           <TouchableOpacity onPress={() =>{
                   highlightRow(sectionID,rowID),
                   this.props.navigation.navigate('SettingDetail',{'name': rowData})
               }}>   
           <View style={styles.viewStyle}>
               <Text style={{fontSize:15}}>{rowData}</Text>
           </View>
           </TouchableOpacity>
           )
       }else{
           return(
               <TouchableOpacity onPress={() =>{
                   highlightRow(sectionID,rowID),
                   this.props.navigation.navigate('SettingDetail',{'name': rowData})
               }}>
               <View style={styles.section_0_style}>
                    <Text style={{fontSize:15}}>{rowData}</Text>
               </View>
               </TouchableOpacity>
           )
       }
   }

this.props.navigation.navigate('SettingDetail',{'name': rowData}) navigation可用属性来获取。 该函数传递参数{rowData}即ListView每行数据到SettingDetail界面。

再SettingDetail界面中可用下面方法

1
2
3
4
static navigationOptions = ({navigation}) => ({
       title:`${navigation.state.params.name}`,
       headerBackTitle: '返回',
   })

来获取传递过来的参数显示到导航条的title。

RN.gif