如何将一个组件左对齐，另一个组件对齐（页面末尾）本地？

Question

我正在使用React Native创建一个应用程序，我希望在页面末尾对齐一个圆圈。

我想这样做：

但它目前是这样的，只有这样：

完整视图：

[

我已经尝试过alignSelf，justifyContent和其他人，但它不起作用。 我对此进行了测试：How to align 2 react native elements, 1 being in the center and 1 on the beginning

但它不起作用。

我的代码：

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',
},

Answer 1

Lkke建议一件可以帮助你解决这个问题的事情 你需要做的是。除主视图css

外，Everthing是正确的

<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',
},

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',
  },
});