嗨，我正在嘗試構建一個聊天專案組件，但我的樣式有問題我無法讓它按我想要的方式作業我希望個人資料圖片位于左側，但文本位于中間和時間在最右邊的頂部的用戶名我做錯了什么？
const ChatItem = () => {
return (
<View>
<View style={styles.card}>
<Image
style={styles.profileImage}
source={{
uri: 'https://reactnative.dev/img/logo-og.png',
}}
/>
<Text style={styles.name}>Username</Text>
<Text style={styles.time}>01:00 AM</Text>
</View>
<Text>Hello World</Text>
</View>
);
};
const styles = StyleSheet.create({
imageWrapper: {},
card: {
flexDirection: 'row',
},
name: {
fontWeight: 'bold',
color: '#000',
},
time: {},
profileImage: {
width: 50,
height: 50,
borderRadius: 90,
},
});
uj5u.com熱心網友回復：
??問題解決了！
您需要更好地了解反應原生樣式，您可以使用以下代碼片段實作您想要的。const ChatItem = () => {
return (<View style={{flexDirection: "row", width: '100%', backgroundColor: "lightgrey", padding: 8}}>
<View style={{justifyContent:"center"}}>
<Image style={{ width: 50, height: 50, borderRadius: 25 }} source={{uri:'https://reactnative.dev/img/logo-og.png'}} />
</View>
<View style={{flexDirection: "column", marginLeft: 8, flex: 1}}>
<Text style={{ fontWeight: 700 }}>Username</Text>
<Text style={{ fontWeight: 300 }}>Hello, Good Morning! This is the message sent by the user </Text>
<Text style={{textAlign:"right", color: "grey", fontSize: 12}}>10:20 PM, Today</Text>
</View>
</View>);
};
這看起來像，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/521102.html
標籤：反应式反应原生样式表
上一篇：驗證輸入的值是否已經存在于陣列中