Question

有没有办法安排这个布局，使图像在左边，按钮在右边？

现在，它只显示左上角的图像，以及横跨屏幕整个宽度的按钮。

谢谢！

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',
    };

render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>
                    Hello, Chat App!
                </Text>


                <Image
                    style={{width: 50, height: 50}}
                    source={getFunction(1)}
                />
                <Button 
                    style={{width: 50, height: 50}}
                    onPress={ () => navigate('Chat', { user: 'Abe', avatar: getFunction(1) })}
                    title = "Chat with Abe"
                />
                <Image
                    style={{width: 50, height: 50}}
                    source={getFunction(2)}
                />                
                <Button 
                    onPress={ () => navigate('Chat', { user: 'Jack', avatar: getFunction(2) })}
                    title = "Chat with Jack"
                />
                <Image
                    style={{width: 50, height: 50}}
                    source={getFunction(3)}
                />                
                <Button 
                    onPress={ () => navigate('Chat', { user: 'Kate', avatar: getFunction(3) })}
                    title = "Chat with Kate"
                />
        );
    }
}

Answer 1

你可以试试这个：

以下代码段用于对齐一个图像和一个按钮。

<View style={{ flex: 1, flex-direction: 'row', justifyContent: 'space-between' }}>
  <View style={{ margin: 15 }} >
   <Image style={{width: 50, height: 50}} source={getFunction(1)} /> 
  </View>

  <View style={{ margin: 15 }} >
   <Button style={{width: 50, height: 50} onPress={ () => navigate('Chat', { 
    user: 'Abe', avatar: getFunction(1) })} title = "Chat with Abe" />
  </View> 

</View>

干杯：）

将按钮元素与图像元素对齐

1 个答案: