如何在React Native中将一个组件对齐到左侧，另一个组件对齐到右侧（页面末端）？

Question

我是一名有用的助手，可以进行文本翻译。以下是您需要翻译的内容：

我正在使用React Native开发应用程序，我想将一个圆形与页面的末尾对齐。

我想做到这一点：

但目前情况是这样的，只会保持现状：

完整视图：

[

我已经尝试过alignSelf、justifyContent等方法，但都没有效果。 我测试了这个链接: 如何在React Native中对齐两个元素，其中一个在中间，另一个在开头，但还是不行。 我的代码:

const ListProductsHeader = () => (
<View>
    <View style={style.containerInfo}>
        <View style={style.circle} />
        <View>
            <Text style={style.unityName}>SUPERMERCADO MACCARTNEY</Text>
            <Text style={style.subInfo}>Categoria: Mercado</Text>
            <Text style={style.subInfo}>Pedido Nº: 1245</Text>
        </View>
    </View>
    <View style={style.containerProducts}>
        <Text style={style.productName}>1x 42 - Coca Cola 2L</Text>
        <View style={style.minus}></View>
    </View>


</View>
);

CSS：

containerProducts:{
paddingTop: 40,
paddingLeft: 15,
flexDirection: 'row',
 },
productName: {
  alignSelf: 'flex-start',
},
minus:{
  width: 20,
  height: 20,
  borderRadius: 20/2,
  backgroundColor: 'red',
},
containerInfo:{
  paddingTop:15,
  flexDirection:'row',
  paddingLeft: 15,
},
unityName:{
  fontWeight: 'bold',
  paddingLeft: 15,
},
subInfo:{
  color: 'gray',
  paddingLeft: 15,
},
circle: {
  width: 50,
  height: 50,
  borderRadius: 50/2,
  backgroundColor: 'red',
  justifyContent: 'flex-end',
},

- Varley Silva

---

<View> <Text style={style.unityName}>超市麦卡特尼</Text> <Text style={style.subInfo}>类别：市场</Text> <Text style={style.subInfo}>订单号：1245</Text> </View> - Ravi Raj

我会将所有屏幕放在问题中。 - Varley Silva

将 justifyContent: 'space-between' 添加到 containerProducts 中可以解决它吗？ - Matt Aft

@MattAft 不，还是一样的方式 :/ - Varley Silva

Answer 1

我想建议一件事情，可以帮助您解决这个问题。您需要做的就是除了主视图CSS之外，其他都是正确的。

    <View style={flexDirection:'row',justifyContent : 'space-between'}>
     <View style={style.circle} />
        <View>
            <Text style={style.unityName}>SUPERMERCADO MACCARTNEY</Text>
            <Text style={style.subInfo}>Categoria: Mercado</Text>
            <Text style={style.subInfo}>Pedido Nº: 1245</Text>
        </View>
     </View>
     <View style={style.containerProducts}>
        <Text style={style.productName}>1x 42 - Coca Cola 2L</Text>
     <View style={style.minus}></View>
    </View>

试试这个，也许能帮到你。

containerProducts: {
    paddingTop: 40,
    paddingLeft: 15,
    flexDirection: 'row',
    justifyContent: 'space-between',
},

- ashutosh pandey

---

在这里我发现了问题，很抱歉一开始我没有正确理解问题，但现在它已经可以正常工作了，只需要将我提到的“containerProducts”上方的CSS替换掉即可。 - ashutosh pandey

但是当我添加另一个小圆时，出现了它们之间的大空间问题。最后，我想制作两个按钮（一个加一个减）和它们之间的数字。这有点像“购物车”，您可以增加或减少产品的数量。 - Varley Silva

抱歉打扰您了。 - Varley Silva

将它们包装在一个视图中，如下所示：<view>b1andb2</view>。该视图将是包含上述视图中圆形的视图，并至少点赞我的答案。谢谢。 - ashutosh pandey

谢谢！这很有帮助。 - WISERDIVISOR

Answer 2

React Native中的全定制聊天

import React, {Component} from 'react';
import {
  Text,
  StyleSheet,
  View,
  TextInput,
  TouchableOpacity,
  SafeAreaView,
  FlatList,
} from 'react-native';

export default class CustomChatScreen extends Component {
  state = {
    messages: [
      {
        msg: 'Heloo',
        id: Math.random(),
        token: '',
        email: '',
        type: 'server',
      },
      {
        msg: 'Server Message',
        id: Math.random(),
        token: '',
        email: '',
        type: 'server',
      },
    ],
    value: '',
  };

  sendMessageToServer = () => {
    if (this.state.value !== '') {
      let payload = {
        msg: this.state.value,
        id: Math.random(),
        token: '',
        email: '',
        type: 'client',
      };
      let mydata = this.state.messages;
      mydata.push(payload);
      this.setState({
        messages: mydata,
        value: '',
      });
    }
  };

  renderFlatListItem = rowData => {
    return (
      <View style={styles.flatListContainerStyle}>
        {rowData.item.type === 'client' ? (
          <View style={styles.clientMsgStyle}>
            <Text>{rowData.item.msg}</Text>
          </View>
        ) : (
          <View style={styles.serverMsgStyle}>
            <Text>{rowData.item.msg}</Text>
          </View>
        )}
      </View>
    );
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <FlatList
          data={this.state.messages}
          keyExtractor={(item, index) => index.toString()}
          renderItem={this.renderFlatListItem}
        />
        <View style={styles.sendMessageConatinerStyle}>
          <TextInput
            style={styles.sendMsgTextInputStyle}
            value={this.state.value}
            placeholder = {"please type here!"}
            placeholderTextColor = {"#000"}
            onChangeText={val => this.setState({value: val})}></TextInput>
          <TouchableOpacity
            style={styles.sendMsgButtonStyle}
            onPress={this.sendMessageToServer}>
            <Text>Send Message</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  sendMessageConatinerStyle: {
    width: '100%',
    height: 60,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'white',
    flexDirection: 'row',
  },
  sendMsgTextInputStyle: {
    backgroundColor: '#e0f2f1',
    flex: 0.8,
    borderTopLeftRadius: 62.5,
    borderBottomLeftRadius: 62.5,
    padding: 20,
  },
  sendMsgButtonStyle: {
    flex: 0.2,
    backgroundColor: '#80cbc4',
    borderBottomRightRadius: 62.5,
    borderTopRightRadius: 62.5,
    fontSize: 18,
    justifyContent: 'center',
    alignItems: 'center',
  },
  flatListContainerStyle: {
    backgroundColor: '#e0f7fa',
    marginTop: 10,
  },
  clientMsgStyle: {
    backgroundColor: '#ffab91',
    borderRadius: 20,
    padding: 15,
    alignSelf: 'flex-end',
  },
  serverMsgStyle: {
    backgroundColor: '#4fc3f7',
    borderRadius: 20,
    padding: 15,
    alignSelf: 'flex-start',
  },
});

- Pravesh Singh

---

我不明白你的问题，能否提供更具体的信息？ - Nicolas Silva