Компоненты не отображаются должным образом с представлением вкладок в React Native - PullRequest
Новая
       20

Компоненты не отображаются должным образом с представлением вкладок в React Native

0 голосов
/ 08 октября 2019

Я использую TabView для отображения верхней навигации внутри нижнего навигатора. В то время как последние два экрана отображаются правильно, первый не отображается должным образом с некоторым нежелательным цветом рамки. То же самое происходит с другими экранами.

Я также пытался с createMaterialTopTabNavigator, но результат тот же. 

import React from 'react';
import { View, Text, StyleSheet, Dimensions, Button, FlatList } from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import { Card, ListItem } from 'react-native-elements';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
//import { ListItem } from 'react-native-elements';
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
const list = [
{
    title: 'We are using List item and we will integrate flat list with it.testing done.',
    icon: 'av-timer'
},
{
    title: 'We are using List item and we will integrate flat list with it.testing done.',
    icon: 'flight-takeoff'
},
{
    title: 'We are using List item and we will integrate flat list with it.testing done.',
    icon: 'flight-takeoff'
},
{
    title: 'We are using List item and we will integrate flat list with it.testing done.',
    icon: 'flight-takeoff'
},
{
    title: 'We are using List item and we will integrate flat list with it.testing done.',
    icon: 'flight-takeoff'
},
{
    title: 'We are using List item and we will integrate flat list with it.testing done.',
    icon: 'flight-takeoff'
},
{
    title: 'We are using List item and we will integrate flat list with it.testing done.',
    icon: 'flight-takeoff'
},
{
    title: 'We are using List item and we will integrate flat list with it.testing done.',
    icon: 'flight-takeoff'
},
//... // more items
]

export default class Property extends React.Component {
[enter image description here][1]  state = {
    index: 0,
    isUnmounted: false,
    routes: [
        { key: 'newProjects', title: 'New Projects(3)' },
        { key: 'rentals', title: 'Rentals(4)' },
        { key: 'resale', title: 'Resale(8)' }

    ],
};

componentDidMount() {
    this.setState({ isUnmounted: true });

}

detailedScreen = () => {
    alert('Pressed OK');
}
keyExtractor = (item, index) => index.toString()
renderItem = ({ item }) => (
    <Card
        containerStyle={{ borderRadius: 5, borderWidth: 1 }}
        imageStyle={{ borderColor: 'transparent', borderWidth: 1, borderRadius: 5 }}
        image={require('../../../propertiyImage.jpg')}
        featuredSubtitle='8 Leads'
        onPress={() => {
            alert('You tapped the button!');
        }}
    >
        <View style={{ flex: 1, flexDirection: 'row' }}>
            <Text style={{ marginBottom: 10, flex: 3 }}>
                Hero World Trade Tower{'\n\n'}
                <Icon name="map-marker" size={16} /> Ambegaon
        </Text>
            <Text style={{ marginBottom: 10, flex: 1 }}>
                8 Leads
        </Text>
        </View>
    </Card>
)
NewProjects = () => (
    <FlatList
        keyExtractor={this.keyExtractor}
        data={list}
        renderItem={this.renderItem}
    />
);

Rentals = () => (
    <FlatList
        keyExtractor={this.keyExtractor}
        data={list}
        renderItem={this.renderItem}
    />
);
Resale = () => (
    <FlatList
        keyExtractor={this.keyExtractor}
        data={list}
        renderItem={this.renderItem}
    />
);
renderTabBar = props => {
    return (
        <TabBar
            {...props}
            indicatorStyle={{ backgroundColor: 'black' }}
            style={{ backgroundColor: 'white', color: 'black' }}
            renderLabel={this.renderLabel}
        />
    )
};
renderLabel = ({ route, focused }) => (
    <Text style={{ color: 'black' }}>
        {route.title}
    </Text>
);

render() {
    return (
        <TabView
            navigationState={this.state}
            renderScene={SceneMap({
                newProjects: this.NewProjects,
                rentals: this.Rentals,
                resale: this.Resale
            })}
            onIndexChange={index => this.setState({ index })}
            renderTabBar={this.renderTabBar}
            initialLayout={{ width: Dimensions.get('window').width }}
            scrollEnabled={true}
            tabStyle={{ width: 600, backgroundColor: 'red' }}

        />
    );
}

} `

Вы можете видеть, что экраныотображается правильно

Вы видите, что первый экран отображается неправильно

...