小编Moj*_*far的帖子

我有一个iOS应用程序,我正在使用react-native.Game类包含一个ListView组件.我在构造函数中设置状态并包含一个dataSource.我现在有一个硬编码的数据数组,我存储在不同的state属性(this.state.ds)中.然后在componentDidMount我使用该cloneWithRows方法克隆我this.state.ds作为我的视图的dataSource.就ListViews来说,这是非常标准的并且运行良好.这是代码:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

 var React = require("react-native");
 var { StyleSheet, Text, View, ListView, TouchableHighlight } = React;

class Games extends React.Component {
constructor(props) {
    super(props);
    var ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 != r2
    });
    this.state = {
        ds: [
            { AwayTeam: "TeamA", HomeTeam: "TeamB", Selection: "AwayTeam" },
            { AwayTeam: "TeamC", HomeTeam: "TeamD", Selection: "HomeTeam" }
        ],
        dataSource: …

我是flexbox的新手,无法在react-native中生成全宽按钮.我一直想把自己搞清楚一天,并且已经阅读了互联网上的每篇相关文章/帖子都无济于事.

我希望有两个TextInput元素跨越屏幕的整个宽度,它们下方的按钮也跨越屏幕的整个宽度.该TextInput元素是横跨屏幕的整个宽度,但是这似乎是在默认情况下,我运行Android模拟器.

这是我的代码:

 var MyModule = React.createClass({
render: function() {
    return (
        <View style={styles.container}>
            <View style={styles.headline}>
                <Text>Hello World</Text>
            </View>

            <View style={styles.inputsContainer}>
                <TextInput style={[styles.input]} placeholder="Email" />
                <TextInput
                    secureTextEntry={true}
                    style={[styles.input]}
                    placeholder="Password"
                />
                <TouchableHighlight
                    style={styles.fullWidthButton}
                    onPress={this.buttonPressed}
                >
                    <Text>Submit</Text>
                </TouchableHighlight>
            </View>
        </View>
    );
},
buttonPressed: function() {
    console.log("button was pressed!");
}
});

var paddingLeft = 15;

var styles = StyleSheet.create({
inputsContainer: {
    // Intentionally blank because I've tried everything & I'm clueless
},
fullWidthButton: {
    // Intentionally blank …

我在我的应用程序中使用React-Navigation,该应用程序包含多个屏幕的StackNavigator,其中一些屏幕具有TextInput, autoFocus={true}

问题:在组件渲染时在这些屏幕上,屏幕的高度在构造函数中设置:

constructor(props) {
    super(props);
    this.state = { 
        height: Dimensions.get('window').height,
    };
}

但是,由于autoFocusTextInput是true,因此在渲染后,屏幕上的键盘几乎立即弹出,导致组件重新渲染,因为在componentWillMount中添加到Keyboard的eventListener:

 componentWillMount() {
    this.keyboardWillShowListener = Keyboard.addListener(
        "keyboardWillShow",
        this.keyboardWillShow.bind(this)
    );
}

keyboardWillShow(e) {
    this.setState({
        height:
            Dimensions.get("window").height * 0.9 - e.endCoordinates.height
    });
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
}

这会影响性能,我希望避免不必要的重新渲染.

问题:
1.是否可以在React-Navigation的ScreenProps中设置键盘的动态高度(取决于设备)？
2. React-Navigation的state.params是否可以这样做？
3.除了应用KeyboardAvoidingView或此模块之外,还有其他方法可以解决此问题吗？

我很反应原生的css-styling ..并且有以下代码:

 <Text>
<Text style={(styles.author, { textAlign: "left" })}>
    {question.view_count + " views\t" + question.comment_count}
    {question.comment_count > 1 || question.comment_count == 0
        ? " comments"
        : " comment"}
</Text>
<Text style={{ textAlign: "right" }}>
    {question.solution_count > 0
        ? question.solution_count + " solutions"
        : " Solve this"}
</Text>
</Text>;

问题是第二个"textAlign:'right'"不起作用 - 文本仍在左侧.我希望文本在同一行,但(显然)右边的第二个文本对象.

任何提示？谢谢!

编辑 输出如下所示:

我正在学习本机反应,在所有教程中,我看到ListView每行只使用1个项目.不过我还没有使用过ListView.我只有6个项目必须显示为平面网格,每行2个项目,应该是响应.我知道它是一个基本问题,但我也试过了我的身边,可以在图像中看到

这是我的代码

 renderDeviceEventList() {
    return _.map(this.props.deviceEventOptions, deviceEventOption => (
        <View key={deviceEventOption.id}>
            <Icon
                name={deviceEventOption.icon_name}
                color="#ddd"
                size={30}
                onPress={() =>
                    this.props.selectDeviceEvent(deviceEventOption)
                }
            />
            <Text style={{ color: "#ff4c4c" }}>
                {deviceEventOption.icon_name}
            </Text>
        </View>
    ));
}
render() {
    return (
        <View
            style={{
                flex: 1,
                top: 60,
                flexDirection: "row",
                justifyContent: "space-around",
                flexWrap: "wrap",
                marginBottom: 10
            }}
        >
            {this.renderDeviceEventList()}
        </View>
    );
}

我正在学习反应Android移动应用程序的本机编程.我想提出一个屏幕,在这里我需要设置高度的button.我加入button的view,并设置使用样式然而有按钮的高度没有变化的高度.

/**
 * LoginComponent of Myntra
 * https://github.com/facebook/react-native
 * @flow
 */



 import React, { Component } from "react";
 import { AppRegistry, Text, View, Button, TextInput } from "react-native";

class LoginComponent extends Component {
render() {
    return (
        <View style={{ flex: 1, flexDirection: "column", margin: 10 }}>
            <TextInput
                style={{
                    height: 40,
                    borderColor: "gray",
                    borderWidth: 0.5
                }}
                placeholder="Email address"
                underlineColorAndroid="transparent"
            />

            <TextInput
                style={{
                    height: 40,
                    borderColor: "gray",
                    borderWidth: 0.5
                }}
                placeholder="Password"
                secureTextEntry={true}
                underlineColorAndroid="transparent"
            />

            <View style={{ …

现在我正在使用下面的代码设置背景图像,其中创建一个额外的图像视图以在视图上设置图像并且其工作正常.

<View>
<Image 
  style={{
     height:67 ,
     width: width} 
  source={Images.header_bachkground}/>
</View>

现在我的问题是:有没有办法直接在视图上设置背景图像,如:

<View 
  style={{
     height:67 ,
     width: width} 
  source={Images.header_bachkground}>
</View>

上面的代码对我不起作用.

如果我将平面列表放在一个视图中,那么我的onEndReached将无限触发,如果我删除封闭的视图onEndReached根本不会被触发.

 render() {
    return (
        <Root>
            <Container>
                <Content>
                    <View>
                        {this.state.listView && (
                            <FlatList
                                data={this.state.variants}
                                keyExtractor={this._keyExtractor}
                                onEndReachedThreshold={0.5}
                                onEndReached={({ distanceFromEnd }) => {
                                    console.log(
                                        "on end reached ",
                                        distanceFromEnd
                                    );
                                    this.loadMore();
                                }}
                                numColumns={1}
                                renderItem={({ item, index }) => (
                                    <CatalogRow
                                        item={item}
                                        in_wishlist={this.state.in_wishlist}
                                        toggleWishlist={() =>
                                            this.toggleWishlist(item.title)
                                        }
                                        listView={this.state.listView}
                                    />
                                )}
                            />
                        )}
                    </View>
                </Content>
            </Container>
        </Root>
    );
}

distanceFromEnd当它被摧毁时,我的值为0,960,1200.它表明了什么？我正在使用react-native 0.47.2

我有一个带有文本框/按钮/其他组件的页面RN平面列表,但问题是我无法滚动到平板列表的末尾,还有一些其他部分是溢出的.

 <View>
<TextInput
    value={this.state.code}
    onSubmitEditing={this.getPr}
    style={styles.input}
    placeholder="placeholder"
/>
<Button onPress={this.getPr} title="Cari" color="blue" />
<FlatList
    data={this.props.produk}
    renderItem={({ item }) => (
        <View key={item.id}>
            <Image
                resizeMode="cover"
                source={{ uri: item.thumb }}
                style={styles.fotoProduk}
            />
        </View>
    )}
    keyExtractor={(item, index) => index}
/>
</View>;

根据我的观察,Alert对话框似乎建立在React Native应用程序之上.因此每次调用它时都会弹出,而不是在render函数中.
问题是它不是异步任务,因此Alert无论回调函数如何,后面的代码都将继续执行.

下面的代码演示了一个Alert对话框不断弹出的情况,因为它一遍又一遍地读取相同的条形码.
(它是用TypeScript编写的.只要听从我的话,这是一个有效的片段.)

 import * as React from "react";
 import Camera from "react-native-camera";
 import { Alert } from "react-native";

 export default class BarcodeScanSreen extends React.Component<any ,any> {
 private _camera;
 private _onBarCodeRead = e => {
    if (e.type === "QR_CODE") {
        Alert.alert(
            "QRCode detected",
            "Do you like to run the QRCode?",
            [
                { text: "No", onPress: this._onNoPress },
                { text: "Yes", onPress: this._onYesPress }
            ],
            { cancelable: false }
        );
    } …