Реагируйте на проблему выравнивания текста и изображения - PullRequest
Новая
       25

Реагируйте на проблему выравнивания текста и изображения

0 голосов
/ 11 марта 2020

Я пытаюсь настроить значок «вперед» в правом нижнем углу и по центру текста выровнять по горизонтали, располагая оба в одном ряду.

ПРИМЕЧАНИЕ. У меня есть локальные изображения, которые работают, но здесь я просто использовал размеры для фиктивный URL-адрес изображения, который не работает

https://snack.expo.io/rkEG55US8 (Snack Expo правильно запускает его на iOS, но не на android и в Интернете) 

const styles = StyleSheet.create({
    icon: {
        height: "80%",
        width: "10%",
        marginLeft: "5%",
    },
    forwardIcon: { alignContent: 'flex-end' },
    title: {
        width: '100%', marginTop: -10, fontSize: 24, lineHeight: 28,
        color: '#012169', fontFamily: 'Roboto', textAlign: 'center',
    },
    item: { marginVertical: 10, width: "100%", height: 130, backgroundColor: 'white', alignItems: 'center', },
})


<View style={{ backgroundColor: "#2C4B9F", flex: 1 }}>
    <SafeAreaView style={{ marginTop: 40, marginLeft: 25, marginRight: 25 }}>
        <View>
            <TouchableOpacity style={styles.item} onPress={() => loadInBrowser('http://google.com/')}>
                <Image source={require("http://via.placeholder.com/239x97.png")} />
                <View style={{ flex: 1, }}>
                    <Text style={styles.title}>Long Longer Text<View style={styles.icon}>
                            <Image style={styles.forwardIcon} source={require("http://via.placeholder.com/36x36.png")} />
                        </View>
                    </Text>
                </View>
            </TouchableOpacity>
        </View>

        <View>
            <TouchableOpacity style={styles.item} onPress={() => loadInBrowser('http://google.com/')}>
                <Image style={{marginTop: 5}} source={require("http://via.placeholder.com/147x86.png")} />
                <View style={{ flex: 1, marginTop: 5 }}>
                    <Text style={styles.title}>Smaller Text<View style={styles.icon}>
                            <Image style={styles.forwardIcon} source={require("http://via.placeholder.com/36x36.png")} />
                        </View>
                    </Text>
                </View>
            </TouchableOpacity>
        </View>
    </SafeAreaView>
</View>

Желаемый.

Desired

Фактически достигнут до сих пор

Actual

1 Ответ

0 голосов
/ 11 марта 2020

Вы не можете центрировать один элемент в двухэлементном флекс-представлении. Вы можете сделать текстовый центр по центру снизу и сделать положение значка «Вперед» абсолютным справа внизу.

...