react-native - React Native 文本和图像并排对齐问题

Question

我正在尝试调整右下角的前进图标和水平对齐的文本中心，它们都在同一行中。

注意：我有可用的本地图像，但在这里我只是使用了无效图像 URL 的大小

https://snack.expo.io/rkEG55US8 （snack expo 在 iOS 上正常运行，但在 android 和 web 上运行不正常）

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>

想要的。

到现在实际达到

标签： react-nativestylesreact-native-flexbox

Answer 1

你不能在一个两元素的 flex 视图中居中一个元素。您可以在底部视图中使文本居中，并使前进图标位置绝对位于右下角。