Горизонтальный ScrollView в React Native, не содержащий потомков - PullRequest
Новая
       61

Горизонтальный ScrollView в React Native, не содержащий потомков

0 голосов
/ 02 февраля 2019

Я пытаюсь воссоздать приложение, разработанное в Android Studio, с использованием React Native.У меня проблемы с горизонтальным ScrollView внутри FlatList с некоторыми элементами одного уровня.Если текст в ScrollView достаточно длинный, он выйдет за пределы FlatList, а также вытолкнет своих братьев и сестер за пределы FlatList.

Я уже пытался использовать множество различных решений, используя flex, flexgrow, flexshrink

Все эти попытки заканчиваются неудачей, потому что всякий раз, когда я пытаюсь назначить значения flex родительскому представлению ScrollView иродительский вид братьев и сестер, ScrollView просто исчезает.Я нигде не могу найти ничего об этой проблеме, и я часами пытался решить ее.Вот как выглядит мой код и как он выглядит на экране.Кто-нибудь с опытом работы с React Native знаком с этой проблемой или у вас есть предложения?Я был бы очень признателен.

Output

import React from 'react';
import {View, Text, StyleSheet, ScrollView} from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'space-around',
        flexDirection: 'row',
        padding: 10,
        marginLeft: 16,
        marginRight: 16,
        marginTop: 8, 
        marginBottom: 8,
        borderRadius: 5,
        backgroundColor: '#FFF',
        elevation: 2
    },
    title: {
        flex: 1,
        fontSize: 16,
        color: '#000',
        marginBottom: 5,
        marginTop: 5
    },
    container_text:{
        flex: 1,
        flexDirection: 'column',
        marginLeft: 12,
        justifyContent: 'center'
    },
    description: {
        fontSize: 11,
        fontStyle: 'italic',
    },
    circle: {
        marginLeft: 5,
        marginRight: 5,
        width: 35,
        height: 35,
        borderRadius: 35/2,
        backgroundColor: '#dae0ea',
    },
    percentageText: {
        alignSelf: 'center',
        textAlign: 'center',
        marginTop: 7,
        marginBottom: 7
    }
});

const CustomRow = ({title, percentage}) => (
    <View style={styles.container}>
        <View style={{flexDirection: 'row',
            justifyContent: 'flex-start'}}>
            <ScrollView horizontal={true} scrollEnabled={true}
                contentContainerStyle={{marginLeft: 20, marginRight: 20}}>
                <Text style={styles.title}>
                    {title}
                </Text>
            </ScrollView>
        </View>
        <View style={{flexDirection: 'row',
                    alignContent: 'flex-end',
                    justifyContent: 'flex-end'}}>
            <View style={styles.circle}>
                <Text style={styles.percentageText}>{percentage}%</Text>
            </View>
            <View style={styles.circle}>
            </View>
        </View>
        
    </View>
);

export default CustomRow; 

import React from 'react';
import { FlatList, Text, View, Button,
  StyleSheet, Platform, SafeAreaView  } from 'react-native';
import { createStackNavigator, createAppContainer }
  from "react-navigation";
import AppText from './components/AppWideText.js';
import third from './res/third.json'
import HomeScreenRow from './components/customRows/HomeScreenRow.js';

const programs = third.Pedro_Alvarez_Program;

const styles = StyleSheet.create({
  container: {
    flex: 1, 
  }
});

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
    headerTitleStyle: {
      fontFamily: 'Roboto'
    },
  };
  render() {
    return (
      <View style={{flex: 1, alignItems: "center"
      , justifyContent: "center"}}>
        <AppText>Selected Programs</AppText>
        <View style={styles.container}>
          <FlatList
            data={programs}
            renderItem={({item}) => 
            <View style={{flexWrap: 'wrap'}}>
              <HomeScreenRow 
              title={item}
              percentage={'10'}
            />
            </View>
            }
          />
        </View>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: HomeScreen,
  Details: DetailsScreen
}, {initialRouteName: "Home"});

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render(){
    return <AppContainer/>;
  }
}
...