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

我正在使用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>
  );

renderTabBar=props=>(
{props.navigationState.routes.map（（路线，i）=>{
返回(
this.setState（{index:i}）}
>
{route.title}
);
})}
);

看，我正在这样做：

style={[style.tabStyle，style.tabStyle.

${i}

]}

但它根本不起作用。我得到了这个错误

TypeError:TypeError:styles.tabStyle_u不是函数

所以我只需要将

touchablepacity

的样式设置为

styles.tabStyle\u 0

或

styles.tabStyle\u 1

或

styles.tabStyle\u 2

在这种情况下，如何实现所需的功能？

当使用变量作为属性访问器时，需要使用

改变这个

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

对此

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