react-native - 反应原生样式组件

Question

我正在尝试设置组件的样式，但无法弄清楚如何做几件事。1) 我想为我的组件 100% 应用背景颜色

return (
        <TouchableWithoutFeedback
          style={styles.touchable}
          onPress={() =>
            this.props.navigation.navigate('Quotes', { name: this.props.name })}
        >
          <View style={styles.viewStyle}>
              <Image
                source={this.props.image}
                key={this.props.image}
                style={styles.imageStyle}
              />
              <Text style={styles.textStyle}> {this.props.name} </Text>
          </View>
        </TouchableWithoutFeedback>
    );
  }
}

const styles = {
  imageStyle: {
    height: 100,
    width: 100
  },
  touchable: {
    width: '100%',
    backgroundColor: 'black'
  },
  viewStyle: {
    height:100,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    backgroundColor: 'black'
  },
  textStyle: {
    marginLeft: 20,
    width: 120,
    fontWeight: 'bold',
    fontSize: 15
  }
}

我尝试将背景颜色应用于可触摸标签视图标签，但这些都不起作用。此外，我想使用 justifyContent: flex-start 将我的图像放置在组件的左上角。但是我在视图标签中的元素保持居中。

我怎样才能实现这些目标？

父组件是：

  render() {
    const {listStyle} = styles
    return (
      <ScrollView style={listStyle}>
        {this.renderCharacters(this.props.matches)}
      </ScrollView>
    );
  }

}
const styles = {
  listStyle: {
    width: '100%',
    height: '100%'
  }
}

标签： react-nativestyling