Comment puis-je créer une barre d'onglets comme celle-ci dans React Native?
Y a-t-il un échantillon comme celui-ci?
3 Réponses :
J'ai créé celui-ci comme celui-ci avec un svg au milieu. Gauche et droite est une vue vide avec une largeur et une couleur d'arrière-plan. Au milieu du composant SVG. Le bouton flottant est effectué avec une position absolue. Je ne sais pas s'il y a une meilleure façon de le faire, mais c'est ma solution.
Avez-vous un échantillon?
Utiliser une image que vous pouvez y parvenir
Exemple de snack: https://snack.expo.io/@msbot01/intelligent-croissant - a> 
import * as React from 'react';
import { Text, View, StyleSheet,Image } from 'react-native';
import Constants from 'expo-constants';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={{backgroundColor:'white', height:'10%', bottom:0, position:'absolute', zIndex:1, width:'100%', justifyContent:'space-between',paddingLeft:15,paddingRight:15, flexDirection:'row', alignItems:'center', shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 5 }}>
<View>
<Icon name="bars" size={25} color="grey" />
</View>
<View style={{height:'100%',width:100, backgroundColor:'white'}}>
<Image style={{width:100,paddingBottom:'20%', position:'absolute', zIndex:3, bottom:'61%' }} source={require('./bottom round 2.png')} />
</View>
<View>
<Icon name="ellipsis-v" size={25} color="grey" />
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: 'white',
position:'relative',
}
});
J'ai créé un en utilisant SVG et Chemin et j'ai pris de l'aide du code suivant
https://itnext.io/reactNative-Curved-tabbar-dc62e681c24d
Aussi le code GitHub: https://github.com/alex-melnyk/clipped- tabbar
J'espère que c'est utile. Merci