ReactNative FlatList неправильно отображается на арабском языке справа налево - PullRequest
Новая
       32

ReactNative FlatList неправильно отображается на арабском языке справа налево

0 голосов
/ 29 мая 2018

У меня есть FlatList для отображения списка пользователей. Когда я меняю язык устройства на арабский, RTL отображается неправильно.Стрелки должны указывать в другую сторону.

Вот скриншот того, как это выглядит на мобильном телефоне.enter image description here

Не могли бы вы подсказать, если я что-то упустил.

Вот мой код.

FlatListScreen.js 

    import React, {Component} from 'react';
import {View, Text, FlatList} from 'react-native';
import {List, ListItem, SearchBar} from 'react-native-elements';

class FlatListScreen extends Component{
    constructor(props) {
        super(props);

        this.state = {
            loading: false,
            date: [],
            page: 1,
            seed: 1,
            error: null,
            refreshing: false
        };
    }

    componentDidMount(){
        this.makeRemoteRequest();
    }

    makeRemoteRequest = () => {
        const {page, seed } = this.state;
        const url = 'https://randomuser.me/api/?seed=${seed}&page=${page}&results=20';
        this.setState({loading: true});
        fetch(url)
            .then(res => res.json())
            .then(res => {
                this.setState({
                    data: page === 1 ? res.results : [...this.state.data, ...res.results],
                    error: res.error || null,
                    loading: false,
                    refreshing: false
                });
            })
            .catch(error => {
                this.setState({error, loading: false});
            });
    };

    renderSeparator = () => {
        return (
            <View
                style={{
                    height: 1,
                    width: '86%',
                    backgroundColor: '#CED0CE',
                    marginLeft: '14%',
                }}
            />
        );
    };

    renderFooter = () => {
        if(!this.state.loading) return null;

        return (
            <View
                style={{
                    paddingVertical: 20,
                    borderTopWidth: 1,
                    borderTopColor: "#CED0CE"
                }}
            />
        )
    };

    renderHeader = () => {
        return <SearchBar 
        placeholder="Search.."
        lightTheme
        round />;
    }

    onLearnMore = (item) => {
        this.props.navigation.navigate('Profile', { ...item });
      };

    render (){
        return (
            <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0}}>
                <FlatList
                    data = {this.state.data}
                    renderItem={({item}) => (
                        <ListItem
                            roundAvatar
                            title={`${item.name.first} ${item.name.last}`}
                            subtitle={item.email}
                            avatar={{uri: item.picture.thumbnail}}
                            containerStyle={{ borderBottomWidth: 0 }}
                            onPress={() => this.onLearnMore(item)}
                        />
                    )} 
                    keyExtractor = {item => item.email}
                    ItemSeparatorComponent={this.renderSeparator}
                    ListHeaderComponent={this.renderHeader}
                    ListFooterComponent={this.renderFooter}
                />
            </List>
        )
    }
    }

    export default FlatListScreen;

Из документации React-native я добавил следующий код для поддержки RTL https://facebook.github.io/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html#writing-rtl-ready-components

MainActivity.java 

 @Override
    protected String getMainComponentName() {
        I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
        sharedI18nUtilInstance.allowRTL(context, true);
        return "navapp";
    }

AndroidManifest.xml 

<application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      android:supportsRtl="true">

1 Ответ

0 голосов
/ 29 мая 2018

Стрелки, отображаемые в вашем FlatList, исходят от компонента ListItem, который вы используете для отображения каждой записи в ваших данных.Вам необходимо проверить текущую поддержку языка / RTL и соответственно отобразить стрелку.

Для достижения желаемого поведения вы можете использовать свойство rightIcon для компонента ListItem.

rightIcon

значок конфигурации для правого значка (необязательно), либо имя из библиотеки значков (например, материала), либо элемент React Native, например изображения.Отображается, если для hideChevron не установлено значение

Образец 

<ListItem
  roundAvatar
  title={'title'}
  subtitle={'sub title'}
  avatar={{uri: item.picture.thumbnail}}
  containerStyle={{ borderBottomWidth: 0 }}
  onPress={() => this.onLearnMore(item)}
  rightIcon={{name: (I18nManager.isRTL ? 'chevron-left': 'chevron-right')}}
/>
...