FAB Tabbar — концепция реальности
- Мобильный
- 29 августа 2018 г.
Теперь, в течение нескольких дней, React Native является одним из ведущих вариантов разработки приложений, когда дело доходит до разработки кроссплатформенных приложений и разработки приложений. Изобретатель Мы любим его как что-то, но этого недостаточно для разработчика Hard core, чтобы удовлетворить его желание сделать что-то из этого мира, не так ли? обычно сейчас, когда Material Design от Google является выбором по умолчанию, когда дело доходит до высококачественного пользовательского интерфейса / IX, мы подумали, почему бы не создать что-то крутое с последними разработками Material Design и React Native, и это приводит нас к этой концепции, воплощенной в реальность.
Написать код этой прекрасной Таббар было не так уж просто, как может показаться на первый взгляд. Мы пробовали разные пути его разработки и, наконец, сделали это, которое может работать так же, как и задумано.
Давайте посмотрим на историю развития этого видения.
Как обычно, мы сделали то же самое, чтобы разместить эту идею в приложении, мы искали различные плагины, которые могли бы дать нам ожидаемые результаты, но все было напрасно, и не было доступных плагинов, которые могли бы работать, что было благословением в маскировке, в результате мы разработали плагин для этого пользовательского дизайна вкладок, который является открытым исходным кодом прямо сейчас, и вы можете реализовать его в своих проектах быстрыми, простыми и простыми шагами.
Первый способ мы пытались сделать это с компонентами React Native, но он не работал так, как ожидалось, и результаты были не совсем такими, как планировалось. Итак, мы придумали другую техническую идею, чтобы построить его и посмотрим, что это было. Между тем вы также можете проверить анимацию на Дриббл и благоустройство.
Мы решили работать над идеей создания полного Таббара с использованием компонентов SVG. И следующие элементы, которые мы собрали вместе, чтобы построить этот Таббар.
- Полая полукруглая таббар
- Круглый пункт Таббара
- Изображение Tabbar
- Анимация в Tabbar и круговой вкладке при переключении.
Итак, следующая проблема, с которой мы столкнулись, заключалась в том, что React native не поддерживает SVG, поэтому нам нужно получить то, что могло бы поддержать SVG, и мы нашли библиотеку реактивных-родных-svg, которая была точкой появления, чтобы получить эту техническую идею.
Мы создали SVG для Circular Tabbar Item и Hollow Semi Circular Tabbar.
import Svg,{
Circle,
Path
} from 'react-native-svg';
<Svg version="1.1" id="bottom-bar" x="0px" y="0px" width='100%' height="100" viewBox="0 0 1092 260" space="preserve">
<AnimatedPath fill="#f0f0f0" d={ `M30,60h${this.state.pathX}
.3c17.2,0,31,14.4,30,31.6c0.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,76H76c42,0-76-34-76-76V90C0,73.4,13.4,60,30,60z` }/>
<AnimatedCircle ref={ ref => this._myCircle = ref } fill="#f0f0f0" cx="546" cy="100" r="100" />
</Svg>
Далее был ключевой момент, который делает панель вкладок привлекательной, то есть анимацию при переключении между двумя вкладками.
Ну, где по умолчанию не сработало, мы должны быть создателем и должны создать индивидуальный, так как здесь анимация по умолчанию не работала, поскольку переходная анимация не срабатывает для Tabbar из-за полой кривизны и анимации вместе с кривизной в Tabbar мы должны создать пользовательский SVG, работающий с динамическим путем для поддержки анимации и кривизны.
Ниже приведен код, ответственный за переход кривизны вместе с пунктом круговой вкладки.
<AnimatedPath fill="#f0f0f0" 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`}/>
Мы создали круг как анимированный компонент, а Таббар как анимированный путь.
const AnimatedCircle = Animated.createAnimatedComponent(Circle) const AnimatedPath = Animated.createAnimatedComponent(Path)
При нажатии пользователя на вкладку переключать анимацию работает за счет работы ниже написанного кода.
update(index) {
if(index == 0) {
this.setState ({
selectedIndex: index,
});
Animated.spring(this.state.pathD,{toValue:22,duration: 10, friction: 10 }).start();
Animated.spring( this.state.circleRadius, { toValue: 211, friction: 10 } ).start();
}
else if(index == 2){
this.setState({
selectedIndex: index,
});
Animated.spring(this.state.pathD,{toValue:691,duration:10,friction:10}).start();
Animated.spring( this.state.circleRadius, { toValue: 880, friction: 10 } ).start()}
else {
this.setState({selectedIndex: index,});
Animated.spring(this.state.pathD,{toValue:357,duration:10,friction:10}).start();
Animated.spring( this.state.circleRadius, { toValue: 546, friction: 10 } ).start();
}
}
Что делает привлекательный вид элемента вкладки и таббара, это делается путем его укладки.
TabBar.Item = TabBarItem;
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%',
},
subContent: {
flexDirection: 'row',
marginLeft: 15,
marginRight: 15,
marginBottom: 10,
zIndex: 1,
position: 'absolute',
bottom: 5,
},
navItem: {
flex: 1,
paddingTop: 6,
paddingBottom: 6,
alignItems: 'center',
zIndex: 0,
},
navImage: {
width: 45,
height: 45,
},
circle: {
bottom: 18,
}
});
Установка состояния по умолчанию Tabbar в начальном состоянии.
this.state = {
selectedIndex: 1,
defaultPage: 1,
navFontSize: 12,
navTextColor: "rgb(148, 148, 148)",
navTextColorSelected: 'rgb(51, 163, 244)',
circleRadius: new Animated.Value(546),
pathD: new Animated.Value(357),
pathX: "357",
pathY: "675",
pathA: "689",
pathB: "706",
showIcon: true
}
this.state.circleRadius.addListener( (circleRadius) => {
this._myCircle.setNativeProps({ cx: circleRadius.value.toString() });
});
Это был код, который был разработан в плагине.
Вы можете использовать этот плагин в своем приложении и сделать его отличным, давайте посмотрим, как его использовать.
Осуществление
import TabBar from "react-native-tab-bar-interaction";
...
render() {
return (<TabBar>
<TabBar.Item
icon={require('./tab1.png')}
selectedIcon={require('./tab1_sel.png')}
title="Tab1"
screenBackgroundColor={{ backgroundColor: '#008080' }}
>
<View>
</View>
</TabBar.Item>
<TabBar.Item
icon={require('./tab2.png')}
selectedIcon={require('./tab2_sel.png')}
title="Tab2"
screenBackgroundColor={{ backgroundColor: '#F08080' }}
>
<View>
</View>
</TabBar.Item>
<TabBar.Item
icon={require('./tab3.png')}
selectedIcon={require('./tab3_sel.png')}
title="Tab3"
screenBackgroundColor={{ backgroundColor: '#485d72' }}
>
<View>
</View>
</TabBar.Item>
</TabBar>);
}
После установки, выполненной в соответствии с руководством, предоставленным Гитаб, вам нужно импортировать «взаимодействие с нативным реагированием на врезку-вкладыш», чтобы добавить вкладку в ваше приложение.
import TabBar from "react-native-tab-bar-interaction";
Добавить пункт Таббар:
<TabBar.Item
icon={require('./tab1.png')}
selectedIcon={require('./tab1_sel.png')}
title="Tab1"
screenBackgroundColor={{ backgroundColor: '#008080' }}
>
<View>
/*tabbar body content here*/
</View>
* Ваше приложение должно содержать 3 вкладки.
1. Добавить неизбранную иконку в эту строку.
icon={require('./tab1.png')}
2. Добавить выбранную иконку в эту строку.
selectedIcon={require('./tab1_sel.png')}
3. Добавить заголовок вкладки в эту строку.
title="Tab1”mind
4. Добавить цвет фона Tab Screen в эту строку.
screenBackgroundColor={{ backgroundColor: '#008080' }}
Проверьте полный исходный код React Native Tabbar на Гитаб.
