页面滚动，导航条固定不动

最新推荐文章于 2022-07-02 09:35:24 发布

ZX10103326

最新推荐文章于 2022-07-02 09:35:24 发布

阅读量3.1k

点赞数

分类专栏： react native 文章标签： javascript 移动开发 ViewUI

本文链接：https://blog.csdn.net/ZX10103326/article/details/84767657

版权

react native 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在react-native中，页面可滚动，导航条不动的demo

'use strict';

import React, {
	AppRegistry,
	StyleSheet,
	Image,
	Text,
	View,
	Alert,
	ToolbarAndroid,
	PixelRatio,
	TouchableHighlight,
	Component,
	ScrollView,
} from 'react-native';
var toolbarActions =[
  {title: 'Create', icon:require('./images/kb-logo.png'), show: 'always', showWithText: false},
  //{title: 'Filter'},
  //{title: 'Settings', icon:require('./images/kb-logo.png'), show: 'always'},
];
class App extends Component {
	
	render() {
		return(
			<View style={{flex:1}}>
				<ToolbarAndroid
						actions={toolbarActions}
						style={styles.toolbar}
						navIcon={require('./images/kb-logo.png')}
						//logo={require('./images/kb-logo.png')}
						title="主标题"
						titleColor="orange"
						subtitle="副标题"
						subtitleColor="green"
						onActionSelected={(position) => {
							Alert.alert("选中的action", ""+toolbarActions[position].showWithText)
						}}
						onIconClicked={() => {
							Alert.alert("点击图标", "点击图标");
						}}
					/>
				<ScrollView style={[{flex:1}]}>
					<Image source={require('./images/6.jpg')} style={styles._img}/>
					<Image source={require('./images/7.jpg')} style={styles._img}/>
					<Image source={require('./images/8.jpg')} style={styles._img}/>
					<Image source={require('./images/9.jpg')} style={styles._img}/>
				</ScrollView>
			</View>
		);
	}
}
const styles = StyleSheet.create({
	toolbar: {
    	backgroundColor: '#e9eaed',
    	height: 56,
  	},
  	_img: {
  		width: 623/PixelRatio.get(),
  		height: 799/PixelRatio.get()
  	}
});
AppRegistry.registerComponent('learn', () => App);