创建一个弯曲的底部导航(在实施之前) [英] create a curved bottom navigation (before after implementation)
本文介绍了创建一个弯曲的底部导航(在实施之前)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在 React Native 中实现这一点?
到目前为止我有这个，我想实现中间曲线.我不知道是用透明视图处理它还是完全切换到 SVG
还有这个 tabBar 组件
/* eslint-disable react/prop-types */从反应"导入反应，{ 组件}import { TouchableOpacity, Text, StyleSheet, View } from 'react-native'从应用程序/主题"导入{颜色}导出默认类 TabBar 扩展组件 {使成为() {让 {渲染图标，获取标签文本，activeTintColor，不活动的TintColor，onTabPress，onTabLongPress，获取可访问性标签，导航，显示标签，} = this.props让 { 路线，索引:activeRouteIndex } = navigation.state返回 (<视图样式={styles.tabBar}>{routes.map((route, routeIndex) => {让 isRouteActive = routeIndex === activeRouteIndex让 tintColor = isRouteActive ?activeTintColor : inactiveTintColor返回 (<TouchableOpacity键={路由索引}风格={styles.tab}onPress={() =>{onTabPress({ 路线 })}}onLongPress={() =>{onTabLongPress({ 路线 })}}无障碍标签={getAccessibilityLabel({路线})}>{renderIcon({ route, focus: isRouteActive, tintColor })}{显示标签?<Text>{getLabelText({ route })}</Text>: 空值}</TouchableOpacity>)})}</查看>)}}const 样式 = StyleSheet.create({标签: {alignItems: '中心',弹性:1，justifyContent: '中心',},标签栏:{alignSelf: '居中',backgroundColor: Colors.primary,边界半径:50，底部:10，海拔:2，flexDirection: '行',身高:65，位置:'绝对'，宽度: '95%',},无限: {宽度:80，高度:100，},无穷大之前:{位置:'绝对'，顶部:0，左:0，宽度:0，高度:0，边框宽度:20，边框颜色:'红色'，边框样式:'实心'，borderTopLeftRadius: 50,borderTopRightRadius: 50,borderBottomRightRadius: 50,borderBottomLeftRadius: 0,变换:[{旋转:'-135度'}]，},无穷后:{位置:'绝对'，顶部:0，右:0，宽度:0，高度:0，边框宽度:20，边框颜色:'红色'，边框样式:'实心'，borderTopLeftRadius: 50,borderTopRightRadius: 0,borderBottomRightRadius: 50,borderBottomLeftRadius: 50,变换:[{旋转:'-135度'}]，},}) 解决方案
这里是一个演示:
How can I achieve this in react native?
So far I have this and I want to implement the middle curve. I don't know to either handle it with a transparent view or switch to SVG completely
and this the tabBar component
/* eslint-disable react/prop-types */
import React, { Component } from 'react'
import { TouchableOpacity, Text, StyleSheet, View } from 'react-native'
import { Colors } from 'App/Theme'
export default class TabBar extends Component {
render() {
let {
renderIcon,
getLabelText,
activeTintColor,
inactiveTintColor,
onTabPress,
onTabLongPress,
getAccessibilityLabel,
navigation,
showLabel,
} = this.props
let { routes, index: activeRouteIndex } = navigation.state
return (
<View style={styles.tabBar}>
{routes.map((route, routeIndex) => {
let isRouteActive = routeIndex === activeRouteIndex
let tintColor = isRouteActive ? activeTintColor : inactiveTintColor
return (
<TouchableOpacity
key={routeIndex}
style={styles.tab}
onPress={() => {
onTabPress({ route })
}}
onLongPress={() => {
onTabLongPress({ route })
}}
accessibilityLabel={getAccessibilityLabel({ route })}
>
{renderIcon({ route, focused: isRouteActive, tintColor })}
{showLabel ? <Text>{getLabelText({ route })}</Text> : null}
</TouchableOpacity>
)
})}
</View>
)
}
}
const styles = StyleSheet.create({
tab: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
},
tabBar: {
alignSelf: 'center',
backgroundColor: Colors.primary,
borderRadius: 50,
bottom: 10,
elevation: 2,
flexDirection: 'row',
height: 65,
position: 'absolute',
width: '95%',
},
infinity: {
width: 80,
height: 100,
},
infinityBefore: {
position: 'absolute',
top: 0,
left: 0,
width: 0,
height: 0,
borderWidth: 20,
borderColor: 'red',
borderStyle: 'solid',
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
borderBottomRightRadius: 50,
borderBottomLeftRadius: 0,
transform: [{ rotate: '-135deg' }],
},
infinityAfter: {
position: 'absolute',
top: 0,
right: 0,
width: 0,
height: 0,
borderWidth: 20,
borderColor: 'red',
borderStyle: 'solid',
borderTopLeftRadius: 50,
borderTopRightRadius: 0,
borderBottomRightRadius: 50,
borderBottomLeftRadius: 50,
transform: [{ rotate: '-135deg' }],
},
})
解决方案
here is a demo: https://snack.expo.io/@nomi9995/cf371e
you need to use react-native-svg
yarn add react-native-svg
import React, { Component } from "react";
import {
Text,
StyleSheet,
View,
Dimensions,
TouchableHighlight,
} from "react-native";
import Svg, { Circle, Path } from "react-native-svg";
const tabs = [1, 2, 3, 4, 5];
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
pathX: "357",
pathY: "675",
pathA: "689",
pathB: "706",
};
}
render() {
return (
<View style={[styles.container]}>
<View style={[styles.content]}>
<View style={styles.subContent}>
{tabs.map((_tabs, i) => {
return (
<TouchableHighlight
key={i}
underlayColor={"transparent"}
onPress={() => console.log("onPress")}
>
<View>
</View>
</TouchableHighlight>
);
})}
</View>
<Svg
version="1.1"
id="bottom-bar"
x="0px"
y="0px"
width="100%"
height="100"
viewBox="0 0 1092 260"
space="preserve"
>
<Path
fill={"#373A50"}
stroke={"#373A50"}
d={`M30,60h${this.state.pathX}.3c17.2,0,31,14.4,30,31.6c-0.2,2.7-0.3,5.5-0.3,8.2c0,71.2,58.1,129.6,129.4,130c72.1,0.3,130.6-58,130.6-130c0-2.7-0.1-5.4-0.2-8.1C${this.state.pathY}.7,74.5,${this.state.pathA}.5,60,${this.state.pathB}.7,60H1062c16.6,0,30,13.4,30,30v94c0,42-34,76-76,76H76c-42,0-76-34-76-76V90C0,73.4,13.4,60,30,60z`}
/>
<Circle
fill={"#7EE6D2"}
stroke={"#7EE6D2"}
cx="546"
cy="100"
r="100"
/>
</Svg>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
overflow: "hidden",
},
content: {
flexDirection: "column",
zIndex: 0,
width: Dimensions.get("window").width - 30,
marginBottom: "4%",
left: "4%",
right: "4%",
position: "absolute",
bottom: "1%",
},
subContent: {
flexDirection: "row",
marginLeft: 15,
marginRight: 15,
marginBottom: 10,
zIndex: 1,
position: "absolute",
bottom: 5,
}
});
i hope this will help you.
这篇关于创建一个弯曲的底部导航(在实施之前)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
