React Native 정상|아래쪽 내 비게 이 션 사용 팁
다행히 누군가가 더 좋 은 네 비게 이 션 구성 요 소 를 제공 했다.바로 우리 가 오늘 말 하고 자 하 는 react-navigation 이 고 ReactNative 는 우리 가 이 구성 요 소 를 사용 하 는 것 을 더욱 추천 했다.
이 글 은 기초 용법 만 설명 하고 있 습 니 다.더 알 고 싶 으 시 면 여기에->나 를 찌르다을 찍 으 세 요.
간단 한 소개
react-navigation 은 주로 네 비게 이 션,아래쪽 tab,상단 tab,측면 미끄럼 등 을 포함 하 는데 각각 다음 과 같다.
효과 전시
구현 코드
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Button,
Text,
View,
Image,
StatusBar
} from 'react-native';
import { StackNavigator, TabBarBottom, TabNavigator } from "react-navigation";
class Home extends React.Component {
static navigationOptions = {
tabBarLabel: ' ',
tabBarIcon: ({ focused, tintColor }) => (
<Image
source={focused ? require('../res/images/hot_hover.png') : require('../res/images/hot.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
/>
)
};
render() {
return (
<View style={styles.container}>
<Text>！ </Text>
</View>
);
}
}
class Circle extends React.Component {
static navigationOptions = {
tabBarLabel: ' ',
tabBarIcon: ({ focused, tintColor }) => (
<Image
source={focused ? require('../res/images/coterie.png') : require('../res/images/coterie.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
/>
)
};
render() {
return (
<View style={styles.container}>
<Text>！ </Text>
</View>
);
}
}
class Tools extends React.Component {
static navigationOptions = {
tabBarLabel: ' ',
tabBarIcon: ({ focused, tintColor }) => (
<Image
source={focused ? require('../res/images/tool.png') : require('../res/images/tool.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
/>
)
};
render() {
return (
<View style={styles.container}>
<Text>！ </Text>
</View>
);
}
}
class Mypage extends React.Component {
static navigationOptions = {
tabBarLabel: ' ',
tabBarIcon: ({ focused, tintColor }) => (
<Image
source={focused ? require('../res/images/my_hover.png') : require('../res/images/my.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
/>
)
};
render() {
return (
<View style={styles.container}>
<Text>！ </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
}
});
const MyApp = TabNavigator(
{
Home: {
screen: Home,
},
Circle: {
screen: Circle,
},
Tools: {
screen: Tools,
},
Mypage: {
screen: Mypage,
},
},
{
tabBarOptions: {
activeTintColor: '#4BC1D2',
inactiveTintColor: '#000',
showIcon: true,
showLabel: true,
upperCaseLabel: false,
pressColor: '#823453',
pressOpacity: 0.8,
style: {
backgroundColor: '#fff',
paddingBottom: 0,
borderTopWidth: 0.5,
borderTopColor: '#ccc',
},
labelStyle: {
fontSize: 12,
margin: 1
},
indicatorStyle: { height: 0 }, //android TabBar ， 0
},
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
lazy: true,
backBehavior: 'none',
});
module.exports = MyApp;
NavigationOptions
물론,NavigationOptions 를 통 해 우리 의 tabBarItem 을 설정 합 니 다.
1.안 드 로 이 드 의 밑줄 을 제거 하고 설정:tabBarOptions=>indicator Style:{height:0};
2.아래쪽 내 비게 이 션 은 내 비게 이 션 맨 위 에 분할 선 을 추가 합 니 다.설정:tabBarOptions=>style=>borderTopWidth:0.5,borderTopColor:'\#ccc';
3.네 비게 이 션 안 드 로 이 드 아이콘 과 텍스트 간격 이 비교적 크 고 수 동 으로 작은 설정 을 조정 합 니 다:tabBarOptions=>labelStyle=>margin:0;
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
