Question

我正在使用React Native来执行此操作。我有以下样式：

const styles = StyleSheet.create({
  tabStyle: {
    marginHorizontal: 10,
    marginTop: 20,
    borderRadius: 2,
  },
  tabStyle_0: {
    backgroundColor: '#ff5252',
  },
  tabStyle_1: {
    backgroundColor: '#3da7dc',
  },
});

我有这个功能：

renderTabBar = props => (
    <View style={styles.tabBar}>
      {props.navigationState.routes.map((route, i) => {
        return (
          <TouchableOpacity
            key={route.key}
            // HERE IS WHERE I NEED TO APPLY THE FUNCIONALITY
            style={[styles.tabStyle, styles.tabStyle_`${i}`]}
            onPress={() => this.setState({ index: i })}
          >
            <Animated.Text style={{ color: '#ffffff' }}>
              {route.title}
            </Animated.Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );

看我正在这样做： style={[styles.tabStyle, styles.tabStyle_ $ {i} ]}

但是它根本不起作用。我收到此错误

TypeError：TypeError：styles.tabStyle_不是函数

因此，我所需要的只是将TouchableOpacity的样式设置为styles.tabStyle_0或styles.tabStyle_1或styles.tabStyle_2。

在这种情况下，我如何实现我的需要？

Answer 1

在将变量用作属性访问器时，需要使用bracket notation。

只需更改

style={[styles.tabStyle, styles.tabStyle_${i}]}

对此

style={[styles.tabStyle, styles[`tabStyle_${i}`]}

如何连接数组索引以根据索引更改组件的样式？

1 个答案: