Я недавно обновил приложение с реакции 15 до реакции 16, и сейчас я провожу некоторые тесты с новым и старым стеком, и по какой-то причине className перестало работать.
Компонент:
import React from 'react';
import { View } from 'react-native';
import pickBy from 'lodash/pickBy';
const propsToIgnore = ['keyboardShouldPersistTaps', 'setRef', 'enableAutoAutomaticScroll'];
const filterFunction = (value, key) => !propsToIgnore.includes(key);
export default props => <View className={props.hidden ? 'CrossPlatformScrollView-hidden' : 'CrossPlatformScrollView'}
{...pickBy(props, filterFunction)} />;
(очень простой) файл scss:
.CrossPlatformScrollView-hidden {
display: none;
}
Результат:
<div class="r-ui-view-15pvbv0" style="flex: 1 1 0%; flex-direction: column; margin-bottom: 50px; -webkit-box-flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal;">
В то время как тот же код с выходом реагирует 15:
<div class="CrossPlatformScrollView rn-1oszu61 rn-1efd50x rn-14skgim rn-rull8r rn-mm0ijv rn-13yce4e rn-fnigne rn-ndvcnb rn-gxnn5r rn-deolkf rn-6koalj rn-16y2uox rn-1wbh5a2 rn-1mlwlqe rn-eqz5dr rn-1mnahxq rn-61z16t rn-11wrixw rn-ifefl9 rn-bcqeeo rn-wk8lta rn-9aemit rn-1mdbw0j rn-gy4na3 rn-bnwqim" style="margin-bottom: 50px;">
Если у компонента есть скрытая опора, он отображает правильный скрытый класс CrossPlatformScrollView.
Конфигурация веб-пакета:
{
test: /\.scss$/,
use: [
{
loader: 'style-loader',
options: { sourceMap: DEBUG }
},
{
loader: 'css-loader',
options: {
localIdentName: '[sha512:hash:base32]-[name]-[local]',
sourceMap: DEBUG
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: DEBUG
}
},
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
includePaths: [path.resolve(__dirname, '../node_modules/foundation-sites/scss/')],
sourceMap: DEBUG,
}
}
]
}
Я проверил несколько связанных вопросов ( Имя класса Css не применяется для реагирующего компонента , Передача className для компонента React ), но я не нашел решения.