导航栏
<blockquote>
<p>温馨提示：示例代码是tsx语法</p>
<h2>先看下效果</h2>
<p><strong>普通手机的效果</strong>
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/f992edce6b85c2c46a2fda5930ff6158?showdoc=.jpg" alt="" /></p>
</blockquote>
<p><strong>带有刘海的手机，例如iPhone X，</strong></p>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/60fbcbd9b1f36b0f2f36fc2dc2c2c739?showdoc=.jpg" alt="" /></p>
<h1>用法：</h1>
<pre><code class="language-javascript">NavigatorBar title={'title'}
leftButtons={{
action: () => this.props.navigation.goBack(),
image:Assets.common.white_back } }</code></pre>
<h1><strong>实现导航栏组件代码，如下：</strong></h1>
<pre><code class="language-javascript">export interface NavigatorBarProps extends CreateTitleProp {
leftButtons?: NavButtonProps[] | NavButtonProps;
rightButtons?: NavButtonProps[] | NavButtonProps;
middleView?: JSX.Element;
style?: StyleProp<ViewStyle>;
}
export class NavigatorBar extends React.PureComponent<NavigatorBarProps, {}> {
render() {
let leftBtnList = getSafeArray(this.props.leftButtons);
let rightBtnList = getSafeArray(this.props.rightButtons);
return (
<View style={[styles.header, this.props.style]}>
<NavButton buttons={leftBtnList} />
<View style={styles.middleTitleView}>
{this.props.title && createTitle({ ...this.props } as CreateTitleProp)}
{this.props.middleView}
</View>
<NavButton buttons={rightBtnList} />
</View>
);
}
}</code></pre>
<pre><code>export function getSafeArray<T>(p: T[] | T | undefined): T[] {
let customArray = [] as T[];
if (p instanceof Array) {
customArray = p;
} else if (p) {
customArray = [p];
}
return customArray;
}</code></pre>
<p>样式：</p>
<pre><code class="language-javascript">header: {
height: screenUtil.headerHeight,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: ThemeApp.GNavBgColor,
paddingTop: screenUtil.statusBarHeight,
paddingHorizontal: 5
// borderBottomWidth: 1,
// borderBottomColor: '#cccccc',
},
middleTitleView: {
position: 'absolute',
bottom: 0,
height: screenUtil.userHeaderHeight,
top: screenUtil.statusBarHeight,
left: 120,
right: 120
}</code></pre>
<h2>导航栏有左边组件、标题、右边组件，三部分组成。左边和右边又是由NavButton组件实现。</h2>
<h3>1、标题</h3>
<pre><code class="language-javascript">interface CreateTitleProp {
title?: string;
textProps?: TextProperties;
titleStyle?: StyleProp<TextStyle>;
}
export function createTitle(createProp: CreateTitleProp) {
// 默认一行显示，显示不下就...表示
const props: TextProperties = { numberOfLines: 1, lineBreakMode: 'tail', ...createProp.textProps };
return (
<View style={styles.title}>
<Text {...props} style={[styles.titleText, createProp.titleStyle]}>{createProp.title}</Text>
</View>
);
}</code></pre>
<p>默认是一行，显示不下就用“...”表示
样式：</p>
<pre><code class="language-javascript"> title: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
titleText: {
fontSize: 16,
color: 'white',
textAlign: 'center',
textAlignVertical: 'center',
backgroundColor: 'transparent',
},</code></pre>
<h3>2、NavButton组件</h3>
<pre><code class="language-javascript">/**
* 导航栏顶部每个按钮
*/
export interface NavButtonProps {
action: () => void;
image?: ImageSourcePropType;
imageStyle?: StyleProp<ImageStyle>;
touchStyle?: StyleProp<ViewStyle>;
title?: string;
titleStyle?: StyleProp<TextStyle>;
}
export function NavButton(ps: { buttons: NavButtonProps[], style?: StyleProp<ViewStyle> }): JSX.Element {
return (
<View style={[styles.leftContainer, ps.style]}>
{ps.buttons.map((button, i) => {
return (
<TouchableOpacity key={i} onPress={() => button.action()} style={[styles.buttonContainer, button.touchStyle]}>
{button.title && <Text style={[styles.titleText, button.titleStyle]}>{button.title}</Text>}
{button.image && <Image source={button.image} style={[styles.backImage, button.imageStyle]} />}
</TouchableOpacity>
);
})}
</View>
);
}</code></pre>
<p>样式：</p>
<pre><code class="language-javascript">leftContainer: {
flexDirection: 'row',
},
buttonContainer: {
alignItems: 'center',
justifyContent: 'center',
// width: 60,
minWidth: 40,
height: screenUtil.userHeaderHeight,
flexDirection: 'row',
},
backImage: {
// width: 60,
resizeMode: 'contain'
},</code></pre>