认证屏幕
大多数应用程序都要求用户通过某种方式进行身份验证才能访问与用户或其他私人内容相关的数据。通常情况下,流程如下所示:
- 用户打开该应用程序。
- 该应用程序从持久性存储装载一些身份验证状态(例如,
AsyncStorage
)。 - 当状态被加载时,根据是否加载有效的认证状态,向用户呈现认证屏幕或主应用程序。
- 当用户注销时,我们清除认证状态并将其发送回认证屏幕。
广告页
在启动app的时候通常会加入广告页面,但是在进入主页之后并不希望按返回键的再回到广告页,针对这种需求有两种做法:
- 跳转之后重置路由
- 使用
SwitchNavigator
针对以上两种需求,都可以使用官方提供的SwitchNavigator
很好的解决
SwitchNavigator
SwitchNavigator
默认情况下不处理回退操作,也就是说A -> B -> C 的过程中,无法回退。
createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);
RouteConfigs
路由配置
SwitchNavigatorConfig
- initialRouteName – 第一次加载时初始选项卡路由的routeName。
- resetOnBlur – 切换离开屏幕时,重置所有嵌套导航器的状态。默认为true。
- paths – 提供routeName到path config的映射,它覆盖routeConfigs中设置的路径。
- backBehavior – 后退按钮是否会导致标签切换到初始路由?如果是,则设置为
initialRoute
,否则none
。默认为none
。
案例:
class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Home
</Text>
<Button
title='go'
onPress={() => { this.props.navigation.navigate('Demo') }}
/>
</View>
);
}
}
class Demo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Demo
</Text>
<Button
title='go'
onPress={() => { this.props.navigation.navigate('Welcome') }}
/>
</View>
);
}
}
class Welcome extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome
</Text>
<Button
title='go'
onPress={() => { this.props.navigation.navigate('Welcome1') }}
/>
</View>
);
}
}
class Welcome1 extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome1
</Text>
<Button
title='go'
onPress={() => { this.props.navigation.navigate('Home') }}
/>
</View>
);
}
}
const AppStack = createStackNavigator({
Home,
Demo
})
const RootStack = createSwitchNavigator({
Welcome,
Welcome1,
App: AppStack
})
export default class App extends Component {
render() {
return (
<RootStack onNavigationStateChange={(prevState, currentState) => { console.log(currentState) }} />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
赞
Its like you read my mind! You appear to know a lot about
this, like you wrote the book in it or something. I think that
you can do with some pics to drive the message home a little bit,
but other than that, this is magnificent blog. A fantastic read.
I will definitely be back.
Thank you for coming. The picture in the blog is lost in a server migration, and it will be repaired later.
哟哟,飙起英文了哎