如何在 React Native 上拥有活动的尖/箭头/三角形选项卡？答案

【问题标题】：How can I achieve to have active pointy/arrow/triangle tabs on React Native?如何在 React Native 上拥有活动的尖/箭头/三角形选项卡？
【发布时间】：2019-02-12 08:20:56
【问题描述】：

似乎我需要使用一些额外的 css 才能实现您将在下面看到的内容：

我已经有了这个组件：

  renderTabBar = props => (
    <View style={tabViewStyles.tabBar}>
      {props.navigationState.routes.map((route, i) => {
        return (
          <TouchableOpacity
            key={route.key}
            style={[
              tabViewStyles.tabItem,
              tabViewStyles.tabStyle,
              tabViewStyles[`tabStyle_${i}`],
            ]}
            onPress={() => this.setState({ index: i })}
          >
            <Text style={{ color: '#ffffff', fontFamily: 'montserratBold' }}>
              {route.title}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );

在样式表上使用这个 css：


  container: {
    flex: 1,
  },
  tabBar: {
    flexDirection: 'row',
    paddingTop: Constants.statusBarHeight,
  },
  onWhite: {
    color: globalStyles.whiteColor.color,
    backgroundColor: globalStyles.whiteColor.backgroundColor,
  },
  bolderFont: {
    fontFamily: 'montserratBold',
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
    padding: 26,
  },
  tabStyle: {
    marginHorizontal: 10,
    marginTop: 20,
    borderRadius: 2,
  },
  tabStyle_0: {
    backgroundColor: '#ff5252',
  },
  tabStyle_1: {
    backgroundColor: '#3da7dc',
  },
});

有了上面的内容，我得到了这个：

所以我仍然缺少标签的尖部分。

我还需要做什么？

【问题讨论】：

用于韧皮使用的png文件

标签： javascript reactjs css react-native

【解决方案1】：

您可以按照here 的描述使用变换的rotate 属性。最小的例子：

<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
      <View style={{width:50,height:50,backgroundColor:'green'}}></View>
      <View style={{transform:[{rotateZ:'45deg'}],width:8,height:8,backgroundColor:'green',marginTop:-4}}></View>
  </View>

小吃示例here

【讨论】：

【解决方案2】：

如果您想要一个纯样式的解决方案而不是图像，您可以执行以下操作：

const triangle = {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: '#ff5252',
    transform: [
      {rotate: '180deg'}
    ]
}

const Triangle = React.createClass({
  render: function() {
    return (
      <View style={[triangle, this.props.style]} />
    )
  }
})

修改自https://codedaily.io/tutorials/22/The-Shapes-of-React-Native。

【讨论】：