Question

我在map函数内部有一个React-Native三元运算符，即使我可以从代码的确切位置成功地控制台日志，它也不会在屏幕上呈现结果。

CSS确实有宽度和高度！

我从代码中注释的位置尝试了控制台日志积极的结果。
我尝试仅用。代替代码。
我尝试使用许多不同的库来完全按照自己的意愿进行操作甚至从极其流行的stackoverflow中获得了这段代码。

但无济于事

       <View>
            <Text>{questions[this.state.questionIndex].question}</Text>
            {questions[this.state.questionIndex].radios.map((text, key) => {
              <View key={key}>
                {console.log(text, key)}
                {this.state.checked == key ? (
                  <TouchableOpacity style={styles.btn} key={key}>
                    <Image style={styles.img} source={unselected} />
                    <Text>{text}</Text>
                  </TouchableOpacity>
                ) : (
                  <View key={key + 1}>
                    <TouchableOpacity
                      key={key}
                      onPress={() => {
                        this.setState({ checked: key });
                      }}
                      style={styles.btn}
                    >
                      <Image style={styles.img} source={selected} key={key + 2} />
                      <Text key={key + 3}>{text}</Text>
                    </TouchableOpacity>
                  </View>
                )}
                {this.props.showInput === key ? (
                  <TextInput
                    placeholder={this.props.placeholder}
                    ediable={true}
                    style={
                      this.props.inputSize === "small"
                        ? styles.inputSmall
                        : styles.inputLarge
                    }
                  />
                ) : null}
                }
              </View>;
            })}
</View>

我希望评论的位置能够呈现出一些东西

我还根据某人对此帖子的回复创建了一个新组件；也不起作用： ` 从“反应”中导入React，{组件}；导入{ StyleSheet，文本，视图，尺寸 TextInput， TouchableOpacity，图片 }来自“ react-native”；

     const unselected = require("./img/rb_unselected.png");
     const selected = require("./img/rb_selected.png");

     export default class Questionnaire extends Component {
       state = {
         checked: false
       };

        render() {
          {

   this.props.questions[this.props.questionIndex].radios.map((text, 
     key) => {
             return (
                 <View key={key}>
                  {console.log(
                   text,
                   key,

         this.props.questions[this.props.questionIndex].radios
                   )}
                   {this.state.checked == key ? (
                    <TouchableOpacity style={styles.btn} key={key}>
                       <Image style={styles.img} source= 
       {unselected} />
                       <Text>{text}</Text>
                    </TouchableOpacity>
                  ) : (
                    <View key={key + 1}>
                       <TouchableOpacity
                        key={key}
                        onPress={() => {
                        this.setState({ checked: key });
                        }}
                        style={styles.btn}
                       >
                        <Image style={styles.img} source={selected} 
        key={key + 2} />
                          <Text key={key + 3}>{text}</Text>
                        </TouchableOpacity>
                     </View>
                   )}
                   {this.props.showInput === key ? (
                    <TextInput
                        placeholder={this.props.placeholder}
                       ediable={true}
                       style={
                        this.props.inputSize === "small"
                           ? styles.inputSmall
                            : styles.inputLarge
                         }
                        />
                    ) : null}
                    }
                 </View>
                );
              });
             }
          }
        }

         const styles = StyleSheet.create({
           container: {
           flex: 1,
           backgroundColor: "#F5FCFF"
           },

           nextButton: {},

            invalidNextButton: {},

            backButton: {},

            img: {
             height: 100,
             width: 100
             },

            btn: {
              flexDirection: "row",
              backgroundColor: "green"
          }
          });

`

Answer 1

尝试返回map函数中的代码。

<View>
    <Text>{questions[this.state.questionIndex].question}</Text>
    {questions[this.state.questionIndex].radios.map((text, key) => {
       return(
           <View key={key}>
               {console.log(text, key)}
               {this.state.checked == key ? (
                   <TouchableOpacity style={styles.btn} key={key}>
                       <Image style={styles.img} source={unselected} />
                       <Text>{text}</Text>
                   </TouchableOpacity>
               ) : (
                   <View key={key + 1}>
                       <TouchableOpacity
                           key={key}
                           onPress={() => {this.setState({ checked: key });}}
                           style={styles.btn} >
                           <Image style={styles.img} source={selected} key={key + 2} />
                           <Text key={key + 3}>{text}</Text>
                       </TouchableOpacity>
                   </View>
               )}
               {this.props.showInput === key ? (
                   <TextInput
                       placeholder={this.props.placeholder}
                       ediable={true}
                       style={
                           this.props.inputSize === "small"
                           ? styles.inputSmall
                           : styles.inputLarge } />
               ) : null }
           </View>
       )
   })}
</View>

无法在屏幕上呈现简单的react native元素吗？

1 个答案: