如何在视图右侧设置文本组件的样式？

Question

你好，我想让上面显示的日期显示在视图的右侧，但是我做不到，有人能给我点建议吗？

我的代码：

 <View style={{padding: 10}}>
      {props.data.data.content != undefined &&
        props.data.data.content != null &&
        props.data.data.content.map((item) => {
          return (
            <View
              style={{
                flexDirection: 'row',
                padding: 10,
                backgroundColor: '#fff',
                elevation: 3,
                margin: '2%',
                borderRadius: 5,
              }}>
              <View>
                <Image
                  source={require('../assets/atbirth.jpg')}
                  style={{height: 40, width: 50}}
                  resizeMode="contain"
                />
              </View>
              <View>
                <View style={{flexDirection: 'row'}}>
                  <Text
                    key={item.id}
                    style={{
                      fontFamily: 'Roboto',
                      fontSize: 18,
                      fontWeight: 'bold',
                    }}>
                    {item.name}
                  </Text>

                  <View >
                    <Text style={{color: 'grey', fontSize: 12,}}>
                      {item.display_date}
                    </Text>
                  </View>
                </View>
                <View style={{flexDirection: 'row'}}>
                  {item.vaccine_list.map((i) => {
                    return (
                      <View style={{flexDirection: 'row'}}>
                        <Text style={{fontFamily: 'Roboto', fontSize: 15}}>
                          {i.name},
                        </Text>
                      </View>
                    );
                  })}
                </View>
              </View>
            </View>
          );
        })}
    </View>

让我知道哪里出了问题以及我如何实现上面显示的行为，任何建议都很好。

Answer 1

您可以使用 Flex 对齐元素。

 <View style={{padding: 10}}>
      {props.data.data.content != undefined &&
        props.data.data.content != null &&
        props.data.data.content.map((item) => {
          return (
            <View
              style={{
                flexDirection: 'row',
                padding: 10,
                backgroundColor: '#fff',
                elevation: 3,
                margin: '2%',
                borderRadius: 5,
              }}>
              <View>
                <Image
                  source={require('../assets/atbirth.jpg')}
                  style={{height: 40, width: 50}}
                  resizeMode="contain"
                />
              </View>
              <View style={{flex:1}}>
                <View style={{flexDirection: 'row', flex: 1}}>
                  <Text
                    key={item.id}
                    style={{
                      fontFamily: 'Roboto',
                      fontSize: 18,
                      fontWeight: 'bold',
                    }}>
                    {item.name}
                  </Text>

                  <View style={{alignItems: 'flex-end'}}>
                    <Text style={{color: 'grey', fontSize: 12,}}>
                      {item.display_date}
                    </Text>
                  </View>
                </View>
                <View style={{flexDirection: 'row'}}>
                  {item.vaccine_list.map((i) => {
                    return (
                      <View style={{flexDirection: 'row'}}>
                        <Text style={{fontFamily: 'Roboto', fontSize: 15}}>
                          {i.name},
                        </Text>
                      </View>
                    );
                  })}
                </View>
              </View>
            </View>
          );
        })}
    </View>

使用 Flex，您将获取所有可用的 space，然后您将能够将日期右对齐