Reactjs react native中的底部导航
Reactjs react native中的底部导航,reactjs,react-native,react-native-android,react-navigation,react-native-navigation,Reactjs,React Native,React Native Android,React Navigation,React Native Navigation,我们可以在导航上的形状中进行这种底部导航吗？我可以在它上面的波浪中进行这种底部导航吗 工作示例： （您可以根据需要的界面调整代码） 示例代码 import React, { Component } from 'react'; import {View, Text, StyleSheet, Image, TouchableOpacity, Dimensions} from 'react-native'; import Icon from 'react-native-vector-icon
我们可以在导航上的形状中进行这种底部导航吗？我可以在它上面的波浪中进行这种底部导航吗 工作示例： （您可以根据需要的界面调整代码） 示例代码
import React, { Component } from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, Dimensions} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Dashboard from './Dashboard';
import Gift from './Gift';
import Like from './Like';
var width = Dimensions.get('window').width
var tabs = [
{
key: 'home',
icon: 'home',
label: 'Home',
barColor: '#388E3C',
pressColor: 'rgba(255, 255, 255, 0.16)',
badgeCount: 0
},
{
key: 'heart',
icon: 'calendar-check',
label: 'Heart',
barColor: '#B71C1C',
pressColor: 'rgba(255, 255, 255, 0.16)',
badgeCount: 2
},
{
key: 'location',
icon: 'users',
label: 'Location',
barColor: '#E64A19',
pressColor: 'rgba(255, 255, 255, 0.16)',
badgeCount: 2
}
]
export default class SupervisorDashboard extends Component<Props> {
constructor(props) {
super(props);
this.state = {
userData: global.userData,
selectedTab: 'home',
}
}
componentDidMount(){
}
dateSelected(e){
this.setState({
selectedDate: e
})
}
homePressed(){
console.log('Home____')
this.setState({
selectedTab: 'home'
})
}
heartPressed(){
console.log('heart____')
this.setState({
selectedTab: 'heart'
})
}
locationPressed(){
console.log('Location____')
this.setState({
selectedTab: 'location'
})
}
renderScene(){
switch(this.state.selectedTab) {
case ('home'):{
return <Dashboard/>
}
break;
case ('heart'):{
return <Like/>
}
break;
case ('location'):{
return <Gift/>
}
break;
}
}
renderMenuIcons(){
var tempArray = []
for (var i =0; i < tabs.length; i++) {
var a = tabs[i].key
console.log(a)
var eachElement;
switch(tabs[i].key) {
case ('home'):{
console.log('I am in home++++++++++')
eachElement = <TouchableOpacity key={i} style={{alignItems:'center', justifyContent:'center'}} onPress={()=>{this.homePressed()}}>
<Icon name = {tabs[i].icon} size={20} light color={this.state.selectedTab==tabs[i].key? 'red' : 'grey'}/>
</TouchableOpacity>
}
break;
case ('heart'):{
console.log('I am in approvals+++++++++++')
eachElement = <TouchableOpacity key={i} style={{alignItems:'center', justifyContent:'center', marginBottom:30, backgroundColor:'green', height:50, width:50, borderRadius:30}} onPress={()=>{this.heartPressed()}}>
<Icon name={tabs[i].icon} size={25} light color={'white'}/>
</TouchableOpacity>
}
break;
case ('location'):{
console.log('I am in location+++++++++++++')
eachElement = <TouchableOpacity key={i} style={{alignItems:'center', justifyContent:'center'}} onPress={()=>{this.locationPressed()}}>
<Icon name={tabs[i].icon} size={20} light color={this.state.selectedTab==tabs[i].key? 'red' : 'grey'}/>
</TouchableOpacity>
}
break;
default:{
console.log('+++++++++++++++++'+tabs[i].key)
}
}
tempArray.push(eachElement)
}
return tempArray;
}
render(){
return(
<View style={{flex:1, backgroundColor: global.backGroundColor}}>
{this.renderScene()}
<View style={styles.oval}>
</View>
<View style={{width:'90%', alignItems:'center', height:70, flexDirection:'row', justifyContent:'space-around', marginLeft:'5%', marginRight:'5%', position:'absolute', bottom:10, borderRadius:30, borderColor: global.borderColor, backgroundColor:global.backGroundColor}}>
{this.renderMenuIcons()}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
background: {
backgroundColor: 'red'
},
oval: {
width: (0.78*width),
height: (0.78*width),
borderRadius: 150,
//backgroundColor: 'red',
borderWidth:1,
borderColor:'#e4e4e4',
transform: [
{scaleX: 1.5}
],
marginLeft:45,
marginTop:150,
position:'absolute',
bottom:-200
}
});
import React，{Component}来自'React'；
从“react native”导入{视图、文本、样式表、图像、TouchableOpacity、维度}；
从“react native vector icons/FontAwesome5”导入图标；
从“/Dashboard”导入仪表板；
从“/”导入礼品；
从“./Like”导入Like；
var width=Dimensions.get（'window'）.width
变量选项卡=[
{
钥匙：“家”，
图标：“家”，
标签：“家”，
barColor:“#388E3C”，
按颜色：“rgba（255、255、255、0.16）”，
警徽数目：0
},
{
关键：“心”，
图标：“日历检查”，
标签：“心”，
barColor:“#B71C1C”，
按颜色：“rgba（255、255、255、0.16）”，
警徽数目：2
},
{
键：'位置'，
图标：“用户”，
标签：'位置'，
barColor:“#E64A19”，
按颜色：“rgba（255、255、255、0.16）”，
警徽数目：2
}
]
导出默认类监控器仪表板扩展组件{
建造师（道具）{
超级（道具）；
this.state={
userData:global.userData，
已选择选项卡：“主页”，
}
}
componentDidMount（）{
}
选定日期（e）{
这是我的国家({
选定日期：e
})
}
homePressed（）{
console.log（'Home\\\\\\'）
这是我的国家({
已选择选项卡：“主页”
})
}
痛心的{
console.log（'heart\uuuu\uuu\uu'）
这是我的国家({
选择选项卡：“心”
})
}
位置按下（）{
console.log（'Location\\\\\\'）
这是我的国家({
已选择选项卡：“位置”
})
}
renderScene（）{
开关（此.state.selectedTab）{
案例（“家”）：{
返回
}
打破
案例（“心脏”）：{
返回
}
打破
大小写（‘位置’）：{
返回
}
打破
}
}
RenderNuicons（）{
var tempArray=[]
对于（变量i=0；i
}
打破
案例（“心脏”）：{
console.log（'我正在审批中'
eachElement={this.heartPressed（）}}>
}
打破
大小写（‘位置’）：{
console.log（'我在位置+
eachElement={this.locationPressed（）}}>
}
打破
默认值：{
console.log（'+tabs[i].key）
}
}
tempArray.push（每个元素）
}
返回数组；
}
render（）{
返回(
{this.renderScene（）}
{this.rendermenucons（）}
);
}
}
const styles=StyleSheet.create({
背景：{
背景颜色：“红色”
},
椭圆形：{
宽度：（0.78*宽度），
高度：（0.78*宽度），
边界半径：150，
//背景颜色：“红色”，
边框宽度：1，
边框颜色：“#e4”，
转换：[
{scaleX:1.5}
],
marginLeft:45，
玛金托普：150，
位置：'绝对'，
底部：-200
}
});
查看这个问题，也许它可以帮助您，但它的宽度是硬编码的，因此会有响应问题，不同屏幕上的300宽度不同。您需要通过计算设备宽度来设置高度和宽度。（更新了示例）